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B 会 开发 ， 也 要 懂 设 计 
国 领悟 先进 的 Web 设 计 理 念 
B 让 你 的 网 站 煜 煜 生 辉 





Web 设 计 常 常 面 对 着 一 个 很 大 的 挑战 ， 它 需要 
结合 设计 人 员 与 程序 员 的 思维 ， 要 跨越 纯 视觉 思考 
者 和 纯 线性 思考 者 之 间 的 交流 鸿沟 。 现 实 世界 中 ， 
很 多 网 站 就 是 程序 员 设计 的 作品 ， 如 何 让 程序 员 拥 
有 设计 者 的 视角 ， 了 解 配 色 、 字 体 、 页 面 布局 等 知 
识 ， 并 熟悉 相关 技术 和 设计 工具 ， 是 本 书 重点 讲述 
” ”本 书 字里行间 融 汇 了 先进 的 Web 设 计 思想 ， 让 
开发 人 员 得 以 避免 网 页 设计 误区 ， 真 正 提高 设计 能 
Fi, FRE ANA. 


Brian P. ‘Hogan 是 一 名 自由 职业 者 和 开发 顾 
G - 他 从 19 995 年 就 开始 从 事 专业 网 站 开发 ， 使 用 
ASP、PHP 和 Ruby 开 发 过 各 种 类 型 的 网 站 和 Web 
让 用 程序 。 人 次 人 所 技术 和 1， 撰 写 技术 文章 ， 


擅长 网 页 设计 和 开发 方面 的 技术 。 
it 
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内 容 提 要 


本 书 系统 而 深入 地 阐释 了 网 站 的 设计 与 实现 ， 帮 助 读 者 从 开发 人 员 的 角度 理解 什么 是 设计 。 通 读本 书 
之 后 ， 读 者 可 以 跨越 纯 视觉 思考 者 和 纯 线 性 思考 者 之 间 的 交流 鸿沟 。 本 书 的 主要 内 容 有 : 如 何 挑选 配色 ， 
如 何 选 择 字 体 ， 如 何 用 Photoshop 实现 基本 设计 ， 如 何 创作 Banner 等 页 面 元 泰 ， 如 何 制 作 HTML 和 CSS 
模板 以 及 如 何 测试 设计 的 兼容 性 和 可 访问 性 等 。 

本 书 适合 开发 人 员 和 Web 设计 师 研 读 ， 对 于 那些 独立 上 且 没有 设计 背景 的 开发 人 员 非 常 有 用 。 
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该 者 评论 





真希 望 我 在 第 一 次 做 网 站 的 时 候 就 能 看 到 这 本 书 。 本 书 涵盖 了 We 开发 的 方方面面 ， 当 你 
需要 改进 网 站 时 ， 这 本 书 能 为 你 解答 很 多 问题 。 


——Shae Murphy, Social Brokerage CTO 





作为 Web 开发 人 员 ， 我 目 以 为 了 解 HTML 和 CSS。 这 本 书 让 我 认识 到 ， 只 了 解 那些 基础 知 
识 是 不 够 的 ，Web 设计 决 不 只 是 改 改 字体 和 颜色 那么 简单 。 





Mike Weber, Web 应 用 开发 人 员 


如 条 你 已 经 准备 好 要 路 入 Web 设计 的 奇妙 世界 ， 读 这 本 书 可 以 让 你 请 晰 且 有 效 地 了 解 那些 
关键 概念 。 为 外 ， 轻 松 的 行文 风格 也 使 得 阅读 本 书 是 一 种 至 受 。 


Jeff Cohen，Purple Workshops 创始 人 





无 论 古 惫 学 者 还 是 经 验 丰富 的 设计 师 都 能 在 这 本 书 中 有 所 收获 。 从 开发 人 员 的 角度 看 , 这 本 
书 在 我 的 日 冲 工 作 中 发 挥 了 巨大 的 作用 ， 它 让 我 在 组 织 页 面 内 容 的 时 候 三 思 而 后 行 。 


一 一 Chris Johnson， 解 决 方案 开发 专家 








从 概念 人 手 ，Hogan 引领 谈 者 见识 了 网 页 设计 的 各 个 阶段 ， 内 容 完备 而 专业 。 筷 学 者 和 行业 
老手 都 能 从 本 书 中 歼 益 ， 收 获 技 术 以 及 技术 之 外 的 各 种 知识 。 


Neal Rudnik, Aspect, Web 和 多 媒体 产品 经 理 





2 区 读者 评论 


在 这 本 以 开发 人 员 为 目标 读者 的 书 中 , 模糊 了 一 些 公司 中 存在 的 设计 团队 和 开发 团队 之 间 的 
FR, Heat, 程序 员 ”也 可 以 创造 出 美观 易 用 的 页 面 。 





Jon Kinney, Avastone Technologies, Ruby 构架 师 


本 书 重点 介绍 了 简单 实用 的 技巧 , 就 算 你 对 对 称 的 理解 仅仅 局 限于 程序 里 的 大 括号 , 运用 书 
中 所 学 的 技巧 也 能 让 你 的 网 页 看 起 来 很 专业 。 





Craig Castelaz， 一 家 大 公司 里 的 小 软件 工程 师 
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第 了 章 
|) 


如 果 你 曾经 写 过 Web 应 用 程序 并 想 让 它 变 得 更 洪亮 ， 如 采 你 想 知 道 你 中 意 的 网 站 是 如 何 用 
CSS 拼凑 起 来 的 ， 那 么 这 本 书 就 是 为 你 准备 的 。 但 是 ， 如 果 你 想 问 的 是 ， 材 多 少 下 才能 把 夹心 棒 
棒 糖 的 巧克力 糖 心 砾 出 来 ， 本 书 束 无 能 为 力 了 ， 维 基 百 科 才 是 你 应 该 去 的 地 方 。 

这 本 书 是 为 没有 设计 背景 的 程序 员 准 备 的 ， 它 涵盖 了 Web 设计 的 主要 过 程 。 在 那些 光鲜 亮 
丽 、 布 局 合理 的 网 站 背后 ， 凝 结 的 是 网 页 设计 师 们 辛勤 的 汗水 。 设 计 网 站 就 像 用 Java、Ruby 或 
者 C# 写 程序 一 样 ， 只 有 遵守 一 定 的 规则 和 民 好 的 习惯 ， 你 才能 获得 想 要 的 结果 。 


1.1 说 在 前 面 的 话 


好 的 Web 设计 不 仅仅 指 漂 亮 的 页 面 ， 像 色彩 、 字 体 、 布 局 和 可 用 性 等 一 些 概念 也 是 设计 的 
一 部 分 。 只 有 当 这 些 元 素 都 被 萎 虑 到 了 ,设计 出 来 的 网 站 才 会 让 用 户 眼 前 一 亮 。 也 许 你 挑 对 了 闫 
色 和 渐变 的 搭配 ， 却 没有 顾及 字体 的 可 读 性 ， 那么 设计 出 来 的 仍然 是 一 个 粳 糕 的 网 站 ， 也许 你 能 
在 Photoshop 或 者 GIMP” 中 做 出 一 个 好 看 的 图 像 ， 但 对 HTML 和 CSS 不 够 了 解 ， 你 也 无 法 在 剖 
war RKR Zik. MRRP S REAL, JavaScript 就 会 漏 词 百出 ， 如 琳 你 不 优化 页 
面 内 容 ， 搜 索引 擎 可 能 就 会 忽视 它 ， 如 采 你 完全 没有 考虑 可 访问 性 和 可 用 性 ,用 户 甚至 会 厌恶 你 
的 网 站 。 











条 条 大 路 通 罗马 


本 书 是 为 那些 想 要 了 解 Web 设计 知识 的 程序 员 写 的 ,涵盖 了 一 些 相 当 有 用 的 入 门 级 Web 
设计 知识 。 当 然 ,， 书 中 所 提 到 的 方法 并 不 是 设计 网 页 的 唯一 路 径 , 但 是 其 中 讲 到 的 技术 会 让 
你 具备 足够 的 知识 去 探索 网 页 设计 中 的 新 领域 ， 并 最 终 形成 自己 的 风格 。 


@ Linux 中 为 XWindows 准备 的 图 像 图 形 软件 。 一 一 译 者 注 
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你 对 书 里 的 许多 例子 可 能 有 不 同 的 见解 ， 会 想到 用 不 同 的 方法 或 者 技术 去 解决 那些 问 
题 ， 这 样 很 好 。 我 故意 留 下 这 些 路口 ， 因 为 这 是 成 为 设计 师 的 必由之路 。 慢 慢 地 你 就 会 


发 现 自己 的 变化 ， 同 时 了 解 用 户 的 需求 变化 。 我 很 期 待 看 到 你 的 设计 作品 。 





另外 ， 创 意 同 样 是 成 功 的 Web 设计 中 不 可 或 缺 的 一 环 。 因 此 我 希望 在 做 本 书 中 的 练习 时 ， 
你 能 尽量 发 挥 目 己 无 穷 的 想象 力 。 在 书 中 ， 我 会 展示 完整 的 Web 设计 流程 ， 和 希望 你 不 会 受 我 所 
说 的 东西 限制 ， 能 在 本 书 的 指导 下 形成 自己 的 风格 ， 比 如 选择 自己 的 字体 和 颜色 。 这 样 ， 你 才能 
从 理论 中 学 到 实用 的 东西 。 我 希望 你 设计 出 来 的 网 页 可 以 跟 我 举 的 例子 完全 不 同 。 

编程 经 验 有 助 于 你 设计 出 吸引 眼球 的 页 面 。 书 的 前 半 部 分 是 一 个 设计 的 世界 , 你 会 学 到 颜色 、 
字体 等 方面 的 知识 ， 这 些 概念 是 网 页 设计 的 基础 ; 男 外 ， 这 部 分 还 会 介绍 设计 师 们 常用 的 工具 和 
技术 。 在 有 了 足够 的 理论 储备 之 后 ， 如 何 写 代 码 将 成 为 本 书 的 主要 内 容 。 毕 莞 , 这 是 一 本 给 程序 
员 看 的 设计 书 ， 对 吧 ? 


1.2 网 页 设计 实战 


让 我 们 跟着 Web 开发 人 员 Ron 来 学 习 网 页 设计 的 主要 流程 吧 。Ron 很 低 ， 他 刚刚 从 一 个 客 
户 那 里 接 了 一 个 设计 小 网 页 的 活 儿 。 


WW/ 小 乔 爱 问 
过 ”现在 还 有 人 在 Photoshop 里 做 页 面 样式 图 吗 


是 的 ,设计 师 们 依然 是 这 么 做 的 。 如 果 你 在 办 公 室 并 没有 看 到 这 样 的 人 ,可 能 是 因为 他 
们 都 是 写 CSS 的 程序 员 ， 不 是 网 页 设计 师 。 其 实 很 大 一 群 开发 人 员 的 日 党 工作 就 是 从 图 形 


设计 师 那 里 接收 Photoshop 文件 (PSD 文件 ) ， 然 后 将 这 些 PSD 文件 整合 到 Web 应 用 中 。 知 
道 如 何 处 理 PSD 文件 是 网 页 设计 过 程 中 很 重要 的 一 环 。 

本 书 之 所 以 用 Photoshop 来 做 页 面 样 式 示 意图 ， 原 因 有 两 个 : 一 是 Photoshop 做 出 来 的 
样式 图 很 适合 用 来 讲解 设计 过 程 中 的 不 同 环节 ， 男 一 个 原因 是 做 完 配 好 闫 色 的 样式 图 之 后 ， 
学 习 CSS 的 概念 会 容易 不 少 。 





1.2.1 明确 要 求 
Ron 的 新 客户 是 一 个 房产 中 介 ， 她 要 做 一 个 小 型 的 内 容 管 理 系统 来 管理 房产 信息 。 跟 这 个 叫 
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Kim 的 中 介 碰 过 一 次 面 之 后 ，Ron 就 开始 在 纸 上 画 首页 的 草图 。 根 据 客户 的 需求 ，Ron 做 了 好 几 
个 设计 ， 并 从 中 选 出 了 三 个 他 认为 最 能 满足 Kim 要 求 的 方案 。 
然后 Ron 跟 Kim 又 磁 了 一 次 面 ，Kim 从 三 个 方案 中 选 了 一 个 ， 并 提出 了 一 些 修改 建议 。 讨 
论 到 配色 的 问题 时 ，Kim 要 求 主题 色调 必须 是 蓝 、 灰 和 和 白 ， 这 样 就 能 跟 她 名 片 的 样式 协调 。 








1.2.2 Photoshop 时 间 


第 二 次 会 面 之 后 ，Ron 就 开始 在 电脑 前 摆弄 Photoshop 了 。 他 很 快 就 按照 Kim 要 求 的 方案 和 
色彩 做 出 了 一 个 页 面 样式 ， 从 素材 库 里 挑 出 了 几 张 免 版 税 的 图 片 ,然后 尝试 了 几 种 不 同 的 灰 和 监 
的 组 合 ， 直 到 满意 为 止 。 最 后 从 Photoshop 里 把 图 片 寻 出， 发 给 了 Kim, 


一 个 星期 之 后 ，Ron 电话 联系 了 Kim， 问 她 对 目前 为 止 的 工作 有 何 建议 。Kim 说 等 她 度假 回 
来 之 后 给 他 答复 ， 让 Ron 再 等 一 周 左右 。 
1.2.3 代码 时 间 

一 周 后 ，Ron 接 到 了 Kim 的 电话 ， 她 对 现在 的 样式 很 满意 ， 并 说 可 以 进行 下 一 步 工 作 了 。 
Ron 松 了 一 口气 ， 然 后 开始 在 自己 喜欢 的 文本 编辑 器 中 写 代 码 ， 把 样式 图 变 成 网 页 。 


Ron 从 创建 简单 的 HTML 文档 开始 ,确定 页 面 的 框架 和 内 容 , 然后 在 Photoshop 中 把 Banner” 
和 其 他 一 些 图 像 切 出 来 放 到 HTML 文档 中 。 


做 完 这 些 之 后 ，Ron 写 了 一 些 CSS (US, FETE TAA. RA, AE Eh 
的 页 面 框架 变 成 了 色彩 明亮 的 双 栏 布局 。 


在 Firefox 六 览 如 中 ， 他 做 的 网 页 就 跟 样式 图 里 的 一 模 一 样 ， 很 漂亮 。 但 古 ， 同 样 的 网 页 在 
IE6 中 就 面目 全 非 了 。 


好 在 Ron 曾经 过 到 过 同样 的 情况 , 他 娴熟 地 在 专门 针对 下 的 样式 表 中 插入 儿 行 代码 。 终于， 
所 有 的 事情 部 搞定 了 ，Ron 把 完成 的 网 页 发 给 Kim。 


1.2.4 一切 就 绪 
Kim 很 喜欢 那个 首页 ， 于 是 Ron 开始 做 网 站 的 其 他 页 面 。 因 为 已 经 确定 了 颜色 搭配 、 图 像 和 
ENK, R PITER To Ron 自己 也 很 开心 ， 因 为 他 的 客户 对 他 的 工作 很 满意 。 


O 通 种 指 网 页 顶端 的 横幅 网 像 。 一 一 详 者 注 


1.2.5 ”现实 不 一 定 总 是 如 此 美好 


这 一 次 Ron 很 走运 ， 遇 到 了 一 个 容易 相处 的 客户 ， 然 而 并 不 是 所 有 的 客户 都 这 样 。 本 书 将 以 
YourFoodbox.com 为 例 进 行 讲 解 ，Foodbox 网 站 的 老板 们 就 很 难 缠 ， 你 马上 就 能 见识 到 了 。 





1.3 YourFoodbox.com 


你 要 为 一 家 资金 非常 充足 的 公司 做 一 个 大 全 式 的 菜谱 分 享 网 站 , 用 户 可 以 在 这 一 网 站 上 查找 
数 以 千 计 的 各 去 来 谱 ， 创 建 目 己 的 菜谱 以 及 修改 已 有 的 菜谱 。 你 刚刚 完成 网 页 设计 ， 在 一 周 之 内 
网 站 就 要 上 线 了 ， 于 征 你 将 做 好 的 东西 给 网 站 的 老板 们 看 。 结 有 末 他 们 虽然 对 功能 部 分 没有 意见 ， 
却 不 能 名. 受 网 站 的 外 观 。 他 们 可 能 会 说 “感觉 差点 什么 ”或 “不 能 吸引 有 眼球 ”之 类 的 话 。 而 且 ， 
他 们 一 定 不 会 提出 具体 的 修改 意见 。 你 必须 运用 自己 收集 客户 需求 的 经 验 , 来 尽量 满足 他 们 的 需 
要 。 


本 书 里 有 儿 章 会 告诉 你 如 何 面 对 这 种 很 常见 的 情况 。 你 还 会 学 到 包括 配色 、 字体 、 按钮 设计 、 
图 像 优 化 和 网 格 模板 设计 等 在 内 的 一 系列 页 面 设计 知识 。 你 不 但 会 了 解 如 何 让 Web 表单 看 起 来 
更 美观 ， 还 会 接触 到 种 类 繁多 的 容 | 门 ， 这 些 窜 门 能 让 页 面 完美 地 跨 浏 览 右 、 跨 平台 。 在 完成 页 面 
搭建 之 后 , 搜索 引 葡 优化 和 页 面 内 容 优 化 的 技巧 则 能 帮助 你 的 页 面 在 搜索 结果 里 名 列 前 其, 并 且 
运行 起 来 更 顺畅 。 

同时 ,你 还 会 了 解 网 站 可 访问 性 的 重要 性 , 你 需要 让 尽 可 能 多 的 用 户 能 更 方便 地 使 用 你 的 网 
站 ， 也 要 照顾 到 生理 有 缺陷 人 群 的 使 用 。 这 一 点 在 商业 上 很 重要 ， 同 时 从 我 个 人 的 角度 来 讲 ， 我 
也 很 在 意 可 访问 性 ， 因 为 我 、 我 父亲 和 我 女儿 都 是 先天 性 白内障 患者 。 当 然 ， 本 书后 半 部 分 才 会 
深入 涉及 可 访问 性 的 问题 , 但 是 在 那 之 前 的 某 些 例子 中 , 我 可 能 会 提 到 与 可 访问 性 及 易 用 性 相关 
的 一 些 概念 。 


1.4 准备 好 了 吗 


虽然 在 我 们 面前 的 是 一 条 很 长 的 路 ， 但 是 我 们 的 目标 明确 。 那 么 ， 融 让 我 们 从 现 有 
YourFoodbox.com 页 面 的 缺陷 开始 ， 看 看 我 们 的 客户 都 有 什么 修改 要 求 吧 ! 


1.5 ”致谢 
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本 书 的 出 版 离 不 开 来 目 同 事 、 朋 友 、 家 人 的 反馈 、 批 评 、 友 善 和 情感 文 持 。 
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谢谢 Chris Warren, Kevin Gisi, Gary Crabtree, Carl Hoover, Josh Anderson 和 Adam Ludwig, 
让 我 有 机 会 做 他 们 的 指导 老师 ， 帮 助 他 们 成 长 。 他 们 的 成 功 让 我 感到 骄傲 。 

谢谢 我 的 爸爸 和 Claudia， 谢 谢 他 们 的 支持 和 建议 。 谢 谢 我 的 妈妈 ， 是 她 把 我 带 到 这 个 世界 
上 ， 很 可 惜 她 没 能 看 到 这 本 书 的 出 版 。 

最 后 ， 感 谢 我 的 妻子 Carissa， 还 有 我 的 女儿 Ana 和 Lisa， 设 有 她 们 的 爱 和 支持 ， 我 不 可 能 
写 出 这 本 书 。 能 有 这 样 一 个 完美 的 家 庭 是 我 此 生 的 六 运 。 就 算 我 因为 要 写作 不 能 跟 她 们 共度 周末 
时 光 ， 她 们 还 是 一 直 鼓 励 我 。 谢 谢 你 们 ， 谢 谢 你 们 能 如 此 支持 我 。 我 爱 你 们 。 
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本 书 的 示例 网 站 


Wm (B) 设计 的 基础 一 一 
重新 设计 Foodbox 


Foodbox 是 一 个 网 络 社区 ， 用 户 可 以 在 上 面 上 传 和 分 享 菜谱 。 网 站 想 做 





成 市 面 上 那些 流行 的 社交 网 站 的 样子 ， 用 户 到 时 可 以 给 菜谱 贴标签 、 留 评论 ， 并 且 能 做 出 自己 的 


EA 


网 站 具有 充足 的 资金 文 持 ， 同 时 还 拥有 一 群 很 有 天 赋 的 开发 人 员 。 你 的 同事 Steve 刚刚 去 给 
网 站 老板 们 过 目 了 演示 产品 ， 回 来 后 把 画 满 圈 圈 点 点 的 笔记 本 扔 在 了 你 的 介子 上 。 

“他 们 很 不 喜欢 首页 的 样子 ,”Steve it, “M Banner 到 配色 都 不 喜欢 。 他 们 说 整个 首页 太 素 
了 ， 如 琳 不 按照 这 个 单子 上 的 意见 修改 ， 剩 下 的 页 面 他 们 看 都 不 想 看 了 。 


2.1 








目前 的 网 站 





先 看 看 现在 的 页 面 古 什么 样 的 (参见 图 2-1) ， 然 后 再 看 看 老板 们 列 出 来 的 意见 。 


DD O DO Do D UD OU 





我 们 束 不 能 和 弄 些 好 看 的 按钮 放 上 去 吗 ? 为 什么 不 用 那 种 内 完 、 交 和 斌 的 按钮 ? 

“我 想 要 Logo 有 倒影 ， 就 像 那 些 流 行 的 Web 2.0 网 站 一 样 。 

这 配色 太 素 了 ， 我 们 需要 那 种 可 以 吸引 人 注意 的 颜色 。 

还 要 课 亮 一 所 的 表单 ， 现 在 这 种 表单 看 起 来 大 像 那些 难看 的 程序 了 。 

我 还 硕 望 页面 看 起 来 更 …… 有 趣 一 些 ， 你 能 明白 吗 ? ” 

首页 上 要 有 食物 的 图 片 ， 这 样 可 以 让 人 们 有 食欲 。 

我 非常 喜欢 亚马逊 那样 的 ， 你 们 能 把 首页 做 成 那 种 样子 吗 ? 但 征 不 要 那 种 标签 似 的 导航 
和 杂乱 无 草 的 内 容 。 这 个 要 求 应 该 不 难 吧 ? “ 
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Eee 可 Get Cookin ' .... 


Foodbox is the best way to collect and share recipes with others. Create an account and start 
building your online Foodbox today. 











Log In 
Usemame[ ——i—i‘s™~™S Recently-added recipes Recipe Categories 
e Stuffed Chicken Breast e Desserts 
Password | e Almond Chicken e Poultry 
。 Baked Cod e Seafood 
Log In | or Get Password e Chocolate Mint Brownies e Pasta 
e Seasonal 
Don't have an account? e Appetize 
Click here to get one now! e More... 








Copyright 2007 Foodbox LLC 
Terms of Service | Privacy Policy 


图 2-1 老板 们 认为 这 个 页 面 太平 痰 了 ， 我 们 会 在 本 书 中 慢 慢 改进 这 个 设计 
在 上 面 的 这 个 列表 里 面 , 那些 负 贡 签 文 票 的 老板 们 列 出 了 很 多 看 起 来 很 奇怪 的 要 求 , 而 你 的 
任务 就 是 设计 出 一 个 能 让 他 们 满意 的 网 页 。 


WW/ 小 乔 爱问 
J #0025] 82 Foodbox 的 页 面 


去 这 个 网 址 看 看 : http://yourfoodbox.com。 你 会 发 现 我 们 的 目的 是 用 一 个 简单 、 直 接 的 
设计 来 演示 本 书 所 要 讲 到 的 技巧 。 或许 这 个 设计 并 不 会 讨 每 个 读者 的 欢心 , 但 是 它 确实 是 最 
适合 初学 者 实现 的 简单 设计 。 


在 设计 的 世界 里 ， 你 需要 牢记 的 是 : 众 口 难 调 。 你 将 面临 的 真正 挑战 是 对 书 中 知识 的 理 
解 和 应 用 。 这 本 书 只 是 一 个 指导 ， 有 具体 到 字体 、 配 色 和 其 他 设计 的 时 候 ， 还 得 看 你 自己 。 


最 后 要 说 的 是 ， 如 果 你 看 上 了 一 个 域名 ， 尽 早 买 下 来 。 正 如 你 看 到 的 ， 我 们 想 用 的 
http://www.foodbox.com 这 个 域名 已 经 被 人 用 了 ， 有 是 另外 一 个 站 点 。 我 们 只 能 用 http://www. 
yourfoodbox.com 这 个 域名 了 。 通 常 来 讲 ， 如 果 你 是 一 个 域名 的 第 一 个 买 家 ,价格 会 很 便宜 ， 
但 是 一 个 经 过 转手 的 域名 则 会 变 得 很 呐 。 





那么 要 从 哪里 开始 呢 ? 首先 需要 做 的 是 了 解 客户 想 从 你 正在 设计 的 这 个 网 站 得 到 什么 。 你 拿 
到 的 这 些 反馈 意见 是 个 很 好 的 切入 点 , 同时 这 些 列 出 来 的 要 求 也 说 明了 上 一 次 的 设计 中 对 客户 要 
求 的 理解 还 是 不 够 深入 。 在 开发 过 程 中 , 收集 客户 的 需求 和 设计 页 面 这 两 个 步 又 一 样 重要 。 你 要 
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做 的 是 运用 你 的 经 验 ， 针 对 客户 的 问题 提供 解决 方案 。 

然后 你 需要 理解 设计 的 网 站 到 底 是 用 来 干什么 的 , 还 需要 把 握 这 个 网 站 的 目标 用 户 。 不 同 的 
用 户 会 对 不 同 的 网 站 有 不 同 的 心理 预期 和 操作 习惯 。 因 此 ， 搞 清楚 你 的 目标 用 户 古 哪些 ,看 看 你 
的 竞争 对 手 是 怎么 做 的 , 扬长 避 短 。 这样， 当 你 面 对 客 户 的 时 候 , 就 可 以 适当 地 提出 这 样 的 问题 : 
“你 们 有 没有 这 样 想 过 ? ” 

最 后 一 点 ,一旦 拿 到 了 客户 的 需求 ,开始 对 之 加 以 分 析 的 时 候 ， 你 就 可 以 开始 画 章 图 了 ( 参 
见 图 2-2)。 对 ,我 指 的 是 用 纸 和 笔 打 草稿 ,这样 做 的 原因 我 马上 就 会 解释 , 但 是 首先 让 我 们 来 看 
看 怎么 从 客户 给 的 反馈 中 提取 我 们 想 要 的 信息 。 
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2-2 ”第 一 张 草 图 ， 一 个 除了 Logo 就 几乎 没有 图 片 的 页 面 


客户 很 难 对 付 ， 但 是 也 别 对 他 们 太 苛 责 

的 确 ,， 那 些 人 可 能 会 提出 一 些 奇 怪 的 要 求 ， 很 难 对 付 。 但 是 你 需要 记 住 的 是 ,这 些 人 让 
你 的 专业 知识 有 了 发 挥 的 机 会 ， 你 的 工作 就 是 理 出 他 们 的 真正 需求 。 他 们 虽然 已 经 尽力 了 ， 
但 还 是 不 太 会 清楚 地 表达 自己 的 想法 。 而 你 则 需要 根据 自己 积累 的 经 验 , 从 他 们 的 含糊 表达 


中 找到 重点 ， 从 而 深入 了 解 他 们 的 困惑 。 
很 多 开发 者 都 认为 客户 并 不 知道 自己 的 真正 需求 ， 但 是 我 觉得 他 们 只 是 不 会 表达 而 已 。 
其 实 ， 他 们 只 有 在 看 过 一 些 不 满意 的 设计 之 后 ， 才 会 比较 清楚 地 意识 到 他 们 的 需求 。 因 此 ， 


最 好 的 方式 就 是 保持 和 客户 的 沟通 , 不 断 给 他 们 看 你 的 设计 方案 , 这 样 他 们 才能 告诉 你 方向 


是 否 正确 。 保 持 沟通 顺畅 是 网 页 设计 很 重要 的 一 点 ， 当 然 ， 在 开发 程序 的 时 候 妃 是 一 样 。 





2.2 收集 需求 “A 1l 


2.2 ”收集 需求 





重新 设计 一 个 已 经 存在 的 应 用 程序 时 , 你 需要 清楚 地 了 解 应 用 程序 的 功能 , 需要 跟 老 板 和 用 
户 谈 一 谈 。 你 也 应 该 读 一 读 源 代码 , 试用 一 下 原来 的 程序 , 或 许 还 会 看 看 苋 争 对 手 的 软件 是 怎么 
做 的 。 重 新 设计 网 站 也 需要 这 一 步骤 。 


任何 一 个 项 目 邦 古 从 收集 需求 开始 的 。 我 们 现在 的 任务 就 是 回头 看 看 Steve 扔 给 你 的 那些 笔 
id (参看 2.1 市 )。 你 要 从 最 基本 的 要 求人 手 ， 逐 步 改 进 网 页 。 


你 会 发 现 上 自己 需要 学 习 怎 么 去 做 按钮 和 其 他 一 些 图 像 。 页 面 上 有 些 链接 需要 用 按钮 来 代 符 ， 
同时 表单 中 的 按钮 也 应 该 更 新 。 


需要 注意 的 是 ,在 设计 的 时 候 不 要 一 味 赶 时 比 ,还 要 小 心经 颖 地 平衡 客户 的 要 求 。 倒 影 和 图 
片 非 条 流行， 你 的 客户 也 提出 了 相关 的 要 求 ， 所 以 你 要 学 会 做 出 这 种 效果 一 一 在 Photoshop 里 面 
是 很 容易 实现 的 ， 同 时 你 还 需要 做 出 一 个 数字 版 的 网 站 Logo， 从 中 你 能 够 学 会 怎样 制作 SVG 
(Scalable Vector Graphic， 可 伸缩 矢量 图 ) 图 像 。 


关于 配色 的 要 求 意味 着 你 需要 了 解 一 些 基本 的 色彩 理论 , 要 了 解 如 何 挑选 一 种 适合 页 面 的 颜 
色 。 当 然 ， 你 也 可 以 用 图 片 、 配 色 和 CSS 技巧 来 让 页 面 或 者 Web 应 用 的 界面 看 起 来 温和 一 些 ， 
这 会 打 玄 客户 关于 表单 外 观 的 顾虑 。 


另外， 这 是 一 个 有 关 食 品 的 页 面 , 不 可 避免 地 要 用 到 不 少食 物 的 图 片 。 而 且 ， 那 些 范 争 对 手 
的 页 面 之 所 以 受 欢迎 ， 图 片 也 有 一 部 分 功劳 一 一 它们 能 唤起 用 户 的 食欲 。 你 找到 一 些 图 片 之 后 ， 
可 能 会 需要 对 它们 做 一 些 调整 ,使 之 适应 你 的 页 面 。 这 就 涉及 图 像 处 理 罗 一 些 技 巧 了 ,例如 图 厂 
的 修饰 、 亮 度 的 调整 和 重新 取样 ， 等 等 。 


还 有 一 些 要 求 可 能 表达 得 不 那么 清楚 ， 其 至 令 人 费解 。 比 如 说 “让 页 面 看 起 来 更 有 趣 "*， 我 
的 建议 是 千 万 别 把 它 太 当 真 。 我 过 到 过 很 多 类 似 的 情况 ， 大 多 数 时 候 ， 在 经 历 了 硬 着 头皮 塞 干 、 
不 断 试 验 和 出 错 之 后 ， 外 加 一 点 小 运气 ,你 就 可 以 达到 这 个 标准 。 只 要 好 好 满足 了 其 他 方面 的 条 
件 ， 你 的 页 面 也 不 会 应 到 哪里 去 。 


更 糟糕 的 情况 是 ， 有 时 候 客户 会 让 你 尽量 模仿 一 个 已 经 存在 的 网 站 的 页 面 样式 , 然后 把 内 容 
放 上 去 束 好 了 。 但 这 个 要 求 还 下 能 市 来 一 些 有 用 的 信息 的 。 回 头 看 看 那个 列表 ， 你 会 发 现 最 后 一 
个 发 话 的 老板 提出 的 意见 人 简直 让 人 摸 不 着 头脑 ,所 以 干脆 就 别 想 了 一 一 这 个 说 法 可 能 看 上 去 不 怎 
样 ， 但 是 那 种 糟糕 的 建议 就 该 被 忽略 。 遵 守 良 好 的 设计 准则 ， 跟 你 的 客户 保持 畅通 、 及 时 交流 ， 
那些 看 起 来 不 可 理喻 的 要 求 最 后 会 慢 慢 得 到 纠正 。 
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2.3 ”明确 目的 


设计 这 个 网 站 时 ， 要 时 刻 关 广 一 条 : 服务 于 你 的 目标 用 户 。 一 个 不 错 的 主意 是 去 问 问 你 的 客 
户 他 们 平时 喜欢 去 哪些 网 站 ， 将 它们 当做 参考 。 并 不 是 说 要 将 这 些 网 站 作为 例子 照搬 ， 但 是 了 解 
这 类 网 站 有 助 于 你 确定 客户 的 口味 。 通 第 ,客户 会 关注 那些 葛 争 对 手 的 网 页 十 怎么 做 的 , 但 有 些 
会 试图 借鉴 那些 完全 不 相干 领域 里 网 站 的 设计 。 人 们 总 古 会 说 “照看 eBay 的 做 就 好 了 ”这 种 
话 。 客 户 之 所 以 这 样 说 ， 是 因为 他 们 对 这 类 网 站 比较 熟悉 。 
在 进行 Foodbox 设计 工作 的 时 候 , 要 记 住 你 是 在 为 客户 和 网 站 目标 用 户 而 设计 。 这 工作 不 是 
为 你 增添 炫 炊 资本 的 , 不 要 企图 用 些 刚刚 学 到 的 很 炫 的 技术 来 震撼 你 的 同事 。 客 户 和 他 们 的 目标 
用 户 才 是 第 一 位 的 。 





专注 于 目标 客户 


几 年 前 我 的 一 个 客户 要 我 帮 他 重新 设计 一 个 大 概 有 100 多 个 页 面 的 网 站 。 他 布 望 新 网 站 
能 帮 他 更 有 效率 地 出 售 自己 的 服务 。 原 来 的 那 一 版 是 他 的 一 个 朋友 设计 的 , 几 个 盗版 的 图 片 ， 
一 些 会 动 的 图 标 ， 几 种 毫 不 起 眼 的 颜色 餐 在 黑色 的 背景 上 ， 还 有 一 小 段 JavaScript 代码 ， 作 
ALAS VERA RING OA, 

这 个 客户 的 生意 口碑 不 锚 , 只 是 他 的 网 站 相对 比较 案 雄 。 RY AOR RR RES 
定 了 ,原因 是 “不 够 有 趣 。 他 总 是 让 我 去 看 一 些 他 喜欢 的 电台 网 站 ， 因 此 我 不 得 不 跟 他 解 
释 这 是 完全 不 同 的 两 个 市 场 。 经 过 漫长 的 协商 、 小 心 跟 姻 地 说 服 和 相互 妥协 ， 最终 我 们 完成 
了 一 个 很 不 错 的 网 站 ,让 他 的 公司 感觉 上 提升 了 几 个 档次 。 两 年 内 ,公司 业 绒 翻 了 几 香 ,他 
也 不 断 地 对 我 表示 感谢 ,谢谢 我 帮助 他 把 握 了 正确 的 方向 。 

我 想 要 强调 的 是 , 设计 时 最 需要 把 握 的 是 目标 用 户 和 制作 这 个 网 站 的 真实 目的 。 你 可 能 
会 需要 作出 一 点 妥协 ， 但 最 终 的 结果 往往 会 更 好 。 


要 确 你 所 有 人 都 能 看 出 网 站 的 用 途 。 它 十 用 来 展示 信息 的 ,还 契 用 来 激发 顾客 的 购 灭 欲 的 ? 
古 用 来 娱乐 用 户 的 , 还 是 用 来 收集 数据 的 ? 具体 说 来 , 设计 一 个 展示 暑期 大 片 的 网 站 跟 设计 一 个 
在 线 零 售 商 的 网 站 肯定 是 不 同 的 。 

要 尺 可 能 了 解 网 站 的 用 户 , 要 做 到 对 一 系列 问题 心中 有 底 。 网 站 是 为 那些 零散 的 用 户 偶 尔 访 
问 准 备 的 ,还 是 为 那些 专业 用 户 的 日 稼 工作 准备 的 ? 了 解 网 站 用 户 对 你 的 规划 设计 很 有 帮助 。 比 
如 ， 为 小 朋友 设计 的 网 站 和 为 房地产 公司 设计 的 网 站 就 是 两 码 事 。 
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2.4 从 哪里 入 手 


你 已 经 知道 了 客户 的 要 求 , 也 对 正在 建设 的 网 站 有 了 充分 的 理解 , 现在 是 开始 行动 的 时 候 了 。 
如 末 你 把 那些 要 求 按照 逻辑 顺序 排列 一 下 ， 它 们 会 以 这 样 的 方式 至 现 。 


(1) 画 出 一 些 基 础 的 设计 和 草图， 并 且 争 取 其 中 一 张 能 够 得 到 认可 。 
(2) 挑选 配色 。 

(3) 挑选 字体 。 

(4) 在 Photoshop 里 实现 基本 的 设计 。 

(5) 为 Banner、 按 钮 和 其 他 元 素 创 作 图 片 。 

(6) 制作 HTML 和 CSS 模板 。 

(7) 测试 设计 的 兼容 性 和 可 访问 性 。 


接 下 来 ， 本 书 就 会 市 着 你 完成 上 述 每 一 个 步 又 ， 教 会 你 完成 这 些 要 求 所 用 到 的 技术 和 理论 。 








W 小 乔 爱 问 EERE 
过 为 什么 不 能 直接 在 Photoshop 里 开始 做 图 或 者 用 HTML 写 页 面 样式 图 呢 


对 于 创作 来 讲 ， 笔 和 纸 是 非常 重要 的 工具 。 更 重要 的 是 ， 画 画 的 速度 比 在 电脑 上 操作 的 
速度 快 多 了 。 并 且 ， 画 出 来 的 结果 可 以 随时 丢弃 一 一 反正 没有 为 它 投 入 很 多 精力 。 

如 果 你 是 程序 员 , 肯定 用 过 办 公 室 里 的 白板 , 肯定 在 上 面 画 过 一 些 简单 的 图 表 来 和 团队 
成 员 交 流 。 你 跟 客户 交流 的 过 程 中 也 可 以 使 用 这 个 方法 ,因为 一 个 不 懂 技 术 的 客户 可 能 会 被 
你 在 笔记 本 电脑 上 敲打 单 击 的 动作 打 断 思路 。 相 比较 而 言 ， 铅 笔 和 纸 则 是 很 好 的 交流 方式 。 
当 着 客户 的 面 画 出 一 些 草图 ， 然 后 直接 给 他 们 看 ， 让 他 们 谈 谈 想 法 。 


这 样 做 的 目的 是 加 深 团 队 和 客户 之 间 的 交流 。 你 的 最 终 设计 可 能 会 跟 初 稿 差 十 万 八 千 
里 ， 但 是 做 过 设计 师 的 人 都 知道 这 再 正常 不 过 的 了 。 是 花 几 个 小 时 在 电脑 上 做 草图 , 还 是 花 
几 分 钟 用 笔 和 纸 画 一 个 草图 ? 纸 笔 是 你 团队 中 的 一 员 ， 让 它们 帮助 你 碰撞 出 思维 火花 吧 。 


2.5 男 出 你 的 想法 


你 应 该 快速 地 画 出 你 的 想法 ， 以 便 跟 别 人 分 享 ， 进 而 做 出 修改 。 有 时 你 其 至 都 可 以 从 客户 那 
里 得 到 建议 。 
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现在 ， 去 拿 一 文笔 和 一 张 纸 来 。 听 话 。 
准备 好 了 ? 那 开 始 吧 。 


画 设计 草图 的 时 候 ， 要 做 到 对 页 面包 售 的 内 容 心中 有 数 。 哪 些 链接 起 需要 放 在 首页 上 的 ? 哪 
些 元 率 征 首页 必须 包括 的 ? 图 2-1 中 包含 了 以 下 几 个 元 素 : 


网 站 名 字 : 

搜索 字段， 

登录 表单 ， 

一 段 关 于 网 站 的 简介 ; 
最 新 的 菜谱 列表 ， 
分 类 列表 。 


除 此 之 外 ， 主 页 还 可 以 包含 一 些 信息 页 面 的 链接 ， 例 如 : 


E 
E 
E 
E 
E 
E 


口 网 站 条 球 ，; 
a 和 注册， 

O 隐私 条 球 ; 
O 联系 方式 。 


现在 让 我 们 一 起 画 一 些 草图 吧 (参见 图 2-3 )。 


— 
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图 2-3 第 二 张 章 图 ， 多 加 了 一 些 图 片 。 相 对 于 第 一 张 草 图 ， 最 大 的 区 别 在 于 这 张 图 
在 左 侧 留 下 了 一 个 较 大 的 空间 ， 可 以 用 来 放 一 张 有 意思 的 图 片 
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2.5.1 一 些 约定 俗 成 的 布局 风格 


你 大 概 已 经 注意 到 了 ,不 少 页 面 都 有 一 些 共有 的 特点 。 比 如 说 大 多 数 页 面 都 在 抬头 有 一 块 地 
方 显示 网 站 的 名 字 或 者 Logo。 大 多 数 网 站 都 会 用 分 栏 的 方式 来 组 织 内 容 ， 其 中 至 少 有 一 栏 钙 用 
来 显示 导航 或 其 他 内 容 的 侧 边 栏 一 一 通 第 网 站 都 会 有 顶部 和 左边 栏 两 个 导航 区 域 。 几乎 所 有 的 页 
面 都 会 有 一 个 页 脚 ， 用 来 显示 版 权 信息 和 附加 的 链接 。 


之 所 以 网 站 之 间 有 这 么 多 相似 的 地 方 ， 是 因为 开发 人 员 会 模仿 已 经 成 功 的 例子 。 例如， 所 有 
的 新 闻 页 看 起 来 都 差不多 ， 这 不 是 马 合 。 毕 竞 ， 所 有 的 报纸 的 布局 也 是 相似 的 。 


日 积 月 票 , 用户 就 会 对 页 面 的 共性 有 所 期 待 。 一 个 合格 的 页 面 应 该 做 到 让 用 户 能 够 快速 找到 
他 想 要 找到 的 内 容 , 而 不 是 在 页 面 里 荡然 四 顾 或 在 网 站 中 点 来 点 去 。 页面 需 要 一 个 很 食 单 的 放 览 
方式 ， 本 书 会 帮 你 慢 慢 达 到 这 个 目标 。 反 过 来 说 ， 如 采 你 疫 有 按照 约定 俗 成 的 规 苑 来 设计 ， 就 会 
让 网 站 用 户 感 到 困惑 。 

画 草 图 之 前 可 以 剖 贤 一 些 网 站 来 寻找 灵感 ， 可 以 找 类 似 领 域 的 网 站 来 看 看 , 也 可 以 参考 一 些 
完全 没有 关系 的 网 站 来 对 比 , 在 此 过 程 中 或 许可 以 发 现 你 的 苋 争 对 手 缺 乏 的 元 素 , 并 在 设计 中 把 
这 些 元 素 变 成 你 的 优势 。 记 住 最 基本 的 原则 : 设计 一 个 可 以 有 效 传播 信息 ,同时 用 户 又 很 熟悉 的 
WGK. 

2.5.2 三 张 草图 

每 个 项 目 你 都 需要 为 客户 准备 三 个 不 同 的 设计 。 一 个 简单 、 保 守 的 ， 一 个 复杂 的 ， 一 个 中 良 
的 《〈《 既 有 点 保守 的 元 素 ， 又 有 些 出 挑 的 设计 )。 

即便 你 不 古 一 个 好 的 设计 师 也 不 用 太 过 担心 , 草图 不 需要 很 识 涡 。 它 们 的 主要 作用 起 把 你 的 
想法 呈现 出 来 让 别人 可 以 看 到 。 

现在 就 让 我 们 来 看 看 我 根据 现 有 的 要 求 攒 出 来 的 三 张 草 图 。 第 一 张 最 人 简约, 但 不 一 定 很 好 看 
(参见 图 2-2)。 页 面 上 除了 登录 框 和 注册 按钮 之 外 ， 并 没有 其 他 太 多 的 东西 。 这 个 设计 的 文字 比 
较 多 ， 因 此 可 能 需要 不 同 的 配色 、 新 变 和 阴影 来 区 分 不 同 的 区 域 。 文 字 比 较 多 的 好 处 是 提高 页 面 
在 搜索 引擎 中 的 排名 ， 缺 点 则 征 看 起 来 不 太 有 趣 。 

第 二 张 草 图 (参见 图 2-3) 展现 了 一 个 多 图 的 设计 ， 在 左 侧 为 大 图 片 留 下 了 空间 ， 把 登录 和 
注册 的 区 域 放 在 了 右边 。 这 个 页 面相 比 第 一 张 图 更 吸引 人 些 , 但 问题 在 于 它 没 有 展示 足够 多 的 吸 
引用 户 深 入 访问 全 站 点 的 信息 。 


第 三 张 设 计 图 则 具备 了 更 多 的 功能 , 整合 了 现 有 页 面 中 的 元 素 , 同时 将 站 点 的 分 类 变 成 了 标 
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签 云 (参见 图 2-4)。 这 个 设计 保留 了 搜索 框 和 其 他 一 些 链接 , 但 是 移 除 了 登录 注册 区 域 ， 只 留 下 
了 两 个 按钮 。 虽然 跟 原 始 设 计 有 后 类 似 , 但 是 这 一 版 增加 了 一 些 图 片 元 秦 , 还 有 一 些 留 日 ， 用 来 
各 用 户 解 释 网 站 的 内 容 和 使 用 这 个 网 站 的 理由 。 











2-4 第 三 张 草 图 : 完善 了 不 少 功 能 。 草 图 运用 了 现 有 页 面 的 一 些 元 素 ， 同 时 也 添加 了 一 些 新 的 东西 


向 客户 寻求 帮助 


当 有 客户 找 你 帮忙 设计 新 网 站 时 ， 记 得 做 一 些 调 查 工 作 。 问 同 他 们 喜欢 的 站 点 ,让 他 们 
告诉 你 喜欢 这 些 站 点 的 原因 。 他 们 给 出 的 答案 最 好 是 : “我 喜欢 Blinksale (http:// 


blinksale.com) 的 配色 。， 或 者 是 “Amazon 的 标签 式 导 航 很 不 错 ! ”之 类 的 。 你 不 用 
照搬 这 些 设计 , 但 是 这 个 过 程 能 够 让 你 对 客户 的 口味 有 个 大 概 的 感觉 。 然 后 你 就 能 利用 这 些 
反馈 加 上 自己 的 判断 和 经 验 ， 做 出 一 些 不 错 的 设计 。 





当 我 展示 设计 作品 的 时 候 , 我 会 准备 一 个 比较 保守 的 设计 , 一 个 比较 乞 术 性 的 设计 和 一 个 兼 
有 两 者 特点 的 设计 ( 那 种 既 有 简单 元 素 也 有 复杂 设计 的 版 本 )。 通 常 ， 客 户 会 选择 中 庸 一 点 的 ， 
并 提出 要 从 另外 两 版 引入 一 些 新 的 东西 。 当 你 在 癌 客 户 展 示 设 计 草 图 或 者 样式 页 面 时 , 你 不 是 在 
展示 最 终 的 产品 ,而 是 在 辣 客 户 说 明 自 己 的 想法 , 然后 让 相关 的 探讨 能 够 继续 下 去 。 就 算 客 户 提 
出 了 修改 要 求 ， 也 不 要 灰心 。 需 要 时 刻 记 住 的 是 那 是 客户 的 页 面 ， 不 是 你 的 个 人 网 站 。 


千 万 不 要 只 同 客 户 展示 一 个 方案 ， 因 为 他 们 喜欢 有 选择 ， 这 样 会 有 参与 感 。 有 些 客户 会 癌 你 
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咨询 该 怎么 做 ,但 实际 上 应 该 是 客户 自己 提出 应 该 怎么 走 下 去 。 水 远 不 要 设想 客户 的 想法 , 这样 
会 显得 比较 傲慢 ， 其 至 会 伤害 你 跟 客户 之 间 的 关系 。 


好 了 ， 现 在 理 图 已 经 完成 了 了 ， 该 是 见 见 老板 们 的 时 候 了 。 


2.6 ”挑选 草图 





Steve 跟 那 些 老 板 们 开 完 会 后 ， 和 面市 笑容 地 拿 着 一 张 草 图 过 来 了。 看 起 来 他 们 选择 了 第 三 张 
(参见 图 2-4)。 当 然 ， 他 们 希望 能 尽快 见 到 带 配 色 和 图 片 的 样式 页 。 


其 实 这 是 一 个 迭代 的 过 程 


有 一 次 我 听 了 一 个 关于 软件 开发 的 讲座 , 主讲 人 是 Robert Martin, 他 把 软件 开发 比 作 写 
书 。 首 先 需 要 有 一 版 草稿 ， 然 后 会 对 草稿 进行 几 次 修改 ,直到 满意 为 止 ， 这样 得 到 的 版 本 就 
是 终 稿 了 。 设计 也 有 类 似 的 过 程 ， 只 不 过 在 完成 几 次 修改 得 到 最 终 版 之 后 ,客户 很 可 能 会 讨 
厌 你 的 设计 。 于 是 你 需要 做 出 让 步 ， 可 能 会 把 几 种 颜色 改 成 自己 讨厌 但 是 客户 喜欢 的 颜色 。 
这 样 会 有 一 种 自己 的 设计 被 毁 掉 的 感觉 ， 而 这 种 感觉 会 给 设计 师 带 来 挫败 感 。 作 为 程序 员 ， 
你 应 该 已 经 熟悉 了 这 种 需求 驱动 的 项 目 开 发 过 程 。 只 要 把 设计 当做 是 类 似 软 件 开发 的 过 程 就 
好 了 ， 它 也 需要 不 断 地 完善 、 重 写 和 重 构 。 


2.7 ”小结 








网 站 再 设计 的 过 程 归 根 结 底 就 是 跟 客 户 沟通 的 过 程 。 一 些 客户 对 自己 的 需求 很 清楚 , 但 大 多 
数 都 需要 在 你 的 帮助 下 才能 理 请 思路 。 有 条 不 率 地 对 客户 提出 一 些 疑 问 ， 并 了 硬 心 地 倾听 ， 最 后 总 
会 有 一 个 好 的 再 设计 方案 出 台 。 

接 下 来 , 客户 们 就 需要 看 到 带 配 色 的 页 面 样式 图 了 , 接 下 来 你 就 要 开始 学 习 一 些 配 色 和 选择 
字体 的 技巧 。 这 些 拉 巧 会 帮助 你 在 下 一 次 磁头 会 之 前 做 出 来 一 份 好 看 的 页 面 样式 图 。 





Wo 也 


在 第 2 章 我 们 绘制 了 网 站 草图 , 目标 是 完成 一 个 样式 设计 ,那么 接 下 来 要 做 的 就 是 挑选 颜色 ， 
并 建立 我 们 自己 的 配色 模板 。 

网 站 设计 往往 是 成 也 配色 败 也 配色 , 这 其 中 的 成 败 取决 于 色彩 的 使 用 和 搭配 。 配 色 可 以 调动 
用 户 的 情感 ， 可 以 在 细微 处 吸引 用 户 的 注意 力 。 这 一 章 是 本 书 的 重点 ， 因 为 这 些 内 容 是 创造 动人 
网 站 必 不 可 少 的 知识 。 

伟大 的 设计 师 似乎 对 颜色 有 天 生 的 敏感 , 往往 是 直觉 和 经 验 引领 他 们 去 为 页 面 创建 配色 模板 
的 。 那 些 配色 模板 (或 者 叫 颜色 组 合 ) 是 基于 实践 而 得 出 的 ， 这 有 点 像 开 发 人 员 经 常 遇 到 的 设计 
模式 。 了 解 了 颜色 之 间 的 关系 之 后 ,你 就 能 挑 出 那些 看 起 来 很 搭 调 的 颜色 ， 这 跟 为 网 络 应 用 选择 
适当 的 设计 模式 一 样 容易 。 


3.1 色彩 基础 
在 我 们 日 剃 生活 的 这 个 立体 的 世界 里 ,物体 会 吸收 和 反射 不 同 的 光线 ， 而 我 们 的 眼睛 ， 就 将 


接受 的 这 些 反 射 光 理解 为 颜色 。 人 们 通常 用 三 种 方式 来 表述 一 个 颜色 : 颜色 的 名 字 ”， 闫 色 的 饱 
和 度 和 颜色 的 亮度 。 


当 需 要 处 理 颜 色 的 时 候 ， 你 不 得 不 考虑 很 多 东西 。 关 于 色彩 的 遮蔽 效 朱 ,， 哪 种 色彩 占 多 少 分 
量 ， 哪 两 种 色彩 放 在 一 起 才 看 着 顺眼 ， 另 外 还 要 想 想 用 户 会 怎么 去 解读 你 散 定 的 配色 等 问题 。 在 
这 个 部 分 ， 你 会 了 解 到 这 所 有 的 东西 是 怎样 运作 的 。 


3.1.1 色调 、 饱 和 度 和 亮度 
当 人 们 谈论 一 个 物体 的 颜色 时 ， 他 们 通常 是 在 说 色调 。 实 际 上 你 一 直 在 使 用 色调 这 个 概念 ， 





© 即 色调 。 一 一 译 者 往 
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LERNER SRA RE ( 绿 的 是 没 熟 的 )， 开 车 时 试图 趁 黄 灯 快速 经 过 路 口 。 


饱和 度 指 的 是 颜色 在 图 像 中 的 分 量 一 一 高 饱和 度 的 色彩 更 加 绚丽 , 而 低 饱 和 度 的 色彩 则 会 发 
显得 沉 问 。 如 采 你 降低 某 种 颜色 的 饱和 度 ， 这 种 颜色 就 至 现 一 种 水 洗 的 效果 。 某 些 时 候 ， 这 
古 个 好 事 一 一 这 种 色彩 可 以 用 来 让 那些 锐利 具有 冲击 力 的 色彩 边 绿 变 得 柔和 。 


调节 色彩 亮度 会 让 颜色 变 亮 或 者 变 上 蜡 。 想 想 在 咖啡 里 加 入 牛奶 的 情况 : 一 杯 标 色 的 咖啡 会 随 
着 牛奶 的 添加 而 变 成 亮 棕 色 或 者 瞳 标 色 。 


改变 颜色 的 亮度 和 饱和 度 会 让 颜色 的 外 观 发 生变 化 (参见 图 3-1)。 
亮度 和 饱和 度 都 最 大 的 图 片 








亮度 减少 一 半 ， 饱 和 度 不 变 


饱和 度 减 少 一 半 ， 亮 度 不 变 


加 | 


亮度 不 变 ， 但 是 饱和 度 很 低 


D | 


| 3-1 ”亮度 和 饱和 度 ( 男 见 彩 插 ) 









3.1.2 ”加 法 混 色 和 减法 混 色 


你 看 到 的 颜色 可 能 跟 打 印 出 来 的 颜色 不 同 。 本 质 上 来 说 , 打印 在 纸 上 的 颜色 和 自然 中 的 颜色 
是 有 区 别 的 。 在 自然 春 中 ， 光 线 是 被 反射 的 ;而 在 屏幕 上 ， 光 线 是 被 投射 的 。 在 屏幕 上 ， 颜 色 的 
混合 方式 是 加 法 混 色 ; 而 在 印刷 中 则 是 减法 混和 色 。 如 果 你 拿 一 幅 画 中 的 颜色 和 电脑 屏幕 上 的 颜色 
作 比 较 ， 就 能 很 清楚 地 看 到 其 中 的 区 别 了 。 
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当 你 用 颜料 、 蜡 笔 或 者 马克 笔 涂 有 鸦 时 ， 所 面 对 的 三 原色 是 黄色 、 监 色 和 红色 。 整 个 过 程 其 实 
是 这 样 的 : 你 从 白色 开始 (所 有 光 混 合 的 结 末 )， 然 后 滤 掉 你 所 不 需要 的 其 他 颜色 ， 从 而 得 到 实 
际 想 要 画 出 的 颜色 。 比 如 你 用 红色 蜡笔 画 画 时 , 所 做 的 其 实生 让 除了 红色 的 其 他 颜色 都 被 吸收 掉 
( 减 挥 )， 这 样 就 只 有 红色 反射 到 人 眼中 了 。 


从 颜料 混合 的 过 程 中 可 以 观察 到 减法 混 色 。 你 大 概 已 经 知道 ， 黄 色 和 蓝 色 混合 会 得 到 绿色 ， 
红色 复 色 混 合 得 到 的 是 索 色 。 当 你 把 所 有 的 颜色 都 混合 起 来 的 时 候 , 就 只 能 得 到 黑色 了 一 一 因 
为 物体 会 把 所 有 的 可 见 光 都 吸收 ,然后 就 没有 光线 能 反射 到 人 眼中 了 。 实 际 上 , BRERA 
的 ， 它 没有 能 量 去 产生 有 颜色 的 光 。 香 在 只 能 反射 黄色 的 光 ， 同时 吸收 所 有 其 他 颜色 的 光 ， 所 以 
它 看 起 来 是 黄色 的 。 

电脑 屏幕 的 显 色 原 理 则 是 基于 加 法 混 色 的 。 在 这 个 系统 中 的 三 原色 是 红色 、 绿 色 和 监 色 。 这 
些 颜色 被 混合 投射 出 来 ， 变 成 光线 。 与 香 敬 不 同 的 和 是， 电脑 屏 幕 上 的 图 像 并 没有 反射 光线 ， 而 是 
确 确 实 实地 发 射出 了 光线 。 屏 莫 上 的 颜色 是 从 无 到 有 的 一 一 从 黑色 的 显示 屏 开 始 , 慢 慢 地 增加 颜 
色 。 当 将 红 、 绿 、 鉴 三 色 混 合 起 来 的 时 候 ， 就 得 到 了 白色 ;如 末 疫 有 混合 任何 闫 色 ， 就 呈现 出 芒 
色 。 这 个 过 程 就 是 “加 法 混 色 ， 你 的 眼睛 接受 的 光线 是 屏幕 发 射出 来 的 。 在 这 种 情况 下 ， 将 绿 
色 和 红色 混合 会 得 到 黄色 。 ” 


好 , 那 这 些 东 西 跟 网 站 设计 有 什么 关系 呢 ? 其 实 了 解 不 同 的 色彩 模式 对 你 来 说 很 重要 。 当 你 
在 电脑 上 做 跟 颜色 有 关 的 事情 时 ， 你 可 以 选择 用 RGB 模式 ， 也 就 是 加 法 混 色 ;或 者 CMYK, 减 
法 混 色 ， 其 中 C 代表 青色 (cyan)，M 代表 品 红 (magenta), Y 代表 黄色 (yellow), K 则 代表 关 
键 色 (key， 通 前 是 法 色 )。 当 你 设计 网 站 时 ， 一 定 要 用 RGB。 但 是 ， 如 条 你 打算 将 做 的 东西 打 
印 出 来 ， 那 么 就 应 该 选择 CMYK， 这 种 色彩 模式 被 大 多 数 的 四 色 打印 系统 所 采纳 。 
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仔细 观察 图 3-2。 左 边 的 监 色 长 方形 看 起 来 比 右边 那个 要 瞳 ， 但 实际 上 两 个 长 方形 的 颜色 是 
一 模 一 样 的 。 这 种 会 欺骗 你 眼睛 的 现象 叫做 色彩 环境 感知 ， 这 种 现象 有 时 会 让 人 很 伤 脑筋 。 

有 一 次 我 为 一 个 客户 更 新 他 的 公司 主页 。 客 户 要 求 将 一 些 红色 的 字母 放 在 浅 监 色 背 景 的 
Banner 上 面 ， 而 且 他 和 希望 我 用 的 红色 要 跟 页 面 上 的 其 他 红色 一 模 一 样 。 





























O 有 时 “加 法 “和 “减法 ” 混 色 的 说 法 会 让 人 感到 困惑 。 在 这 里 ， 我 的 标准 是 颜色 的 反射 一 以 色素 为 基础 的 颜色 
混合 的 相 减 过 程 。 当 我 为 了 得 到 绿色 而 把 黄色 和 监 色 混合 起 来 时 ， 看 上 去 我 是 在 加 入 一 种 颜色 ， 但 实际 上 我 是 减 
少 了 某 一 个 种 类 的 可 见 光 ， 因 此 这 个 过 程 不 是 “加 法 ”。 
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图 3-2 ”哪个 蓝 色 方块 看 起 来 更 暗 ( 男 见 彩 插 ) 


作为 一 个 开发 者 ， 你 应 该 能 看 出 问题 在 哪儿 。 顾 客 告诉 了 我 们 实现 的 效 末 一 一 他 想 让 Banner 中 
的 红色 跟 页 面 上 的 其 他 红色 看 起 来 一 样 ， 而 我 却 需要 找 一 种 较为 亮 一 点 的 红色 才能 达到 这 个 效 末 。 


实际 上 ， 当 我 用 客户 指定 的 红色 时 ， 他 并 不 喜欢 那个 效果 ， 那 种 红色 看 起 来 不 对 劲 。 当 我 把 
这 个 红色 调 得 稍微 亮 了 一 点 之 后 ， 它 看 起 来 就 跟 页 面 上 其 他 红色 差不多 了 ， 客 刀 也 很 满意 。 


色彩 所 处 的 环境 在 很 大 程度 上 会 影响 它 在 页 面 中 所 至 现 出 的 效 末 。 即 便 从 技术 角度 来 看 , 颜 
色 选 择 正确 无 误 ， 也 可 能 还 需要 额外 的 调整 ， 才 能 让 那些 颜色 看 起 来 是 正常 的 。 


Fluting 是 产生 这 种 效果 的 原因 。Fluting 指 的 古 你 的 眼睛 会 把 相近 的 颜色 进行 混合 。 你 可 以 
好 好 利用 Fluting (参见 图 3-3)。 通 过 例子 可 以 发 现 ，Fluting 可 以 实现 浙 变 。 如 来 过 渡 不 够 平 背 ， 
WSS UR OCR. 但 古 如 来 过 渡 是 通过 一 些 很 小 的 变化 来 实现 的 , 那么 你 的 眼睛 就 会 名 略 那 
些 变化 ， 把 所 有 颜色 都 混合 在 一 起 。 














用 较 少 的 色 块 来 显示 一 个 颜色 到 另外 一 个 颜色 的 渐变 ， 过 湾 很 明显 





如 条 增加 色 块 的 数量 ， 我 们 的 感官 就 开始 自动 地 融合 这 些 颜 色 





成 千 上 万 的 色 块 则 让 颜色 的 过 湾 平 滑 无 颖 


3-3 色彩 Fluting 〈 另 见 彩 插 ) 
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3.3 用 颜色 唤起 情感 


从 小 我 们 就 知道 ， 颜 色 跟 情感 、 情 绪 和 感觉 有关。 对 网 站 进行 配色 的 时 候 ， 要 仔细 考虑 你 的 
选择 会 带 来 的 不 同 效 果 ， 这 很 重要 。 如 果 用 错 了 红色 或 者 蓝 色 就 可 能 给 用 户 带 来 不 愉快 的 感觉 ， 
或 是 造成 困惑 。 


3.3.1 暖色 
顾名思义 , 暖色 会 让 你 联想 到 温暖 , 阳光 和 热 。 有 人 认为 看 着 暖色 调 的 颜色 就 会 感觉 到 温暖 。 
1. 红色 


红色 起 一 种 浓烈 的 颜色 ,代表 着 爱情 、 愉 悦 、 验 福 和 浪漫 。 它 有 时 也 会 用 来 表现 情欲 、 惯 把 、 
战争 、 紧 急 或 者 危险 。 在 网 站 里 面 ， 红 色 总 被 用 来 显示 警告 或 者 错误 信息 ， 它 能 很 快 地 吸引 用 户 


注意 。 

















2. 黄色 


用 户 很 难 把 注意 力 集中 到 黄色 上 , 但 是 如 采 运 用 得 当 , 这 种 颜色 会 让 人 联想 到 智慧 和 第 福 感 。 
很 多 应 用 都 用 渐渐 消失 的 黄色 来 让 用 户 知道 他 们 的 操作 成 功 了 。 


3. 橙色 


柳 色 可 以 像 黄 色 那 样 让 人 振奋 ， 但 是 也 会 给 人 一 种 傲慢 的 感觉 ， 这 取决 于 检 色 偏 红 的 程度 。 
有 专家 认为 ， 杰 色 中 的 红色 元 素 对 大 脑 有 刺 沿 作用。 





3.3.2 冷色 








冷色 给 人 带 来 清凉 和 沉着 的 感觉 。 它 们 看 着 很 舒服 ， 你 可 以 用 这 些 颜色 来 让 页 面 变 得 缓和 。 
冷色 系 包括 了 蓝 色 、 绿 色 和 紫色 。 


时 
ct 


een, PAAR, SR ARH, ENDL ee es. (AER 
得 很 深 ， 则 会 引起 悲伤 和 诅 形 。 


2. 绿色 


人 们 喜欢 将 绿色 与 自然 、 和 希望 、 健 康 以 及 有 同情 心 联 系 在 一 起 。 然 而 ， 如 末 运 用 不 当 , 绿色 
还 可 以 引起 嫉妒 (可 能 这 种 印象 出 自 于 英文 表达 法 “green with envy”)。 除 了 嫉妒， 绿色 还 可 能 
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代表 着 贫 柳 、 徘 恶 和 混乱。 一 些 绿色 可 以 让 人 上 腿 得 到 休息 ， 这 些 绿色 可 以 让 用 户 变 得 和 组 。 但 是 
不 正确 地 使 用 绿色 则 会 给 用 户 禹 去 不 愉快 的 感觉 。 


紫色 是 a a Ph, REITE A UREE, 但 是 大 
DOD Ss CLAY ARG he AMOER. 8 Che Ft ARR Ei, 主要 原因 是 古 时 候 制 
造 索 色 是 一 件 极 为 困难 的 事情 。 紫色 是 红色 禾 色 的 混合 ， 这 意味 着 它 养 有 两 者 的 一 些 竺 外 UR 
3s Gee Lh Abe AR, AIP PREM. Woe IR EA TE. KER 8 A BESS 
让 人 看 起 来 不 太 舒 服 。 


3.3.3 ”中 性 色 


AR. AE, RE, KE, KEM ERM, CITAI TO enka ZAM, 使 
用 它们 作为 背景 色 可 以 突出 其 他 的 颜色 。 
1. 黑色 


法 色 至 现 出 威信 和 优雅 ， 使 用 得 当 的 话 ， 寻 色 会 很 有 冲击 力 。 然 而 ， 殿 色 也 跟 忧 伤 、 死 记 、 
绝望 和 多 许 联 系 在 一 起 。 如 果 要 在 设计 中 使 用 黑色 ， 你 必须 仔细 考量 目标 用 户 。 


2. AE 


白色 代表 纯洁 和 完美 , 最 适合 干净 的 网 站 。 但 是 如 果 使 用 过 多 , 也 会 显得 无 趣 和 没有 创造 力 。 
男 外， 白色 作为 背景 色 的 时 修 可 以 让 其 他 颜色 更 突出 。 

















黑 与 白 : 不 是 颜色 的 颜色 


从 技术 上 来 说 ， 黑 与 白 不 算是 颜色 。 当 我 们 说 到 屏幕 上 的 颜色 的 时 候 ， 黑 色 代 表 的 是 所 
有 颜色 的 缺失 ,白色 则 是 所 有 颜色 的 混合 。 回 忆 一 下 有 关 加 法 混合 和 减法 混合 的 概念 ， 我 们 
ee 绘画 时 则 和 上 述 情况 正好 相反 。。 

但 是 ， 虽 然 它们 从 技术 角度 来 看 不 是 颜色 ， 但 是 它们 仍然 能 唤起 人 们 的 某 些 情绪 ， 因 此 
我 们 LERHR Aa SHER E RAE, 


3. 标 色 


棕色 会 激发 饥饿 感 ， 也 会 让 人 感觉 健康 和 简洁。 另外 ， 也 有 人 和 觉得 标 色 不 干净 、 很 脏 。 这 种 
效果 当然 不 是 你 的 网 站 所 追求 的 。 
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4. 米色 


米色 可 以 让 人 放松 。 它 是 一 种 保守 的 颜色 , 来 目标 色 和 白色 的 混合 。 米 色 很 适合 做 背景 颜色 ， 
因为 它 显 得 很 冷静 ， 能 突出 其 他 的 颜色 。 


5. 灰色 








灰色 很 少 能 唤起 人 的 什么 情绪 ， 就 算 有 ， 也 大 多 征 忧 伤 、 悲 彭 和 诅 形 等 。 灰 色 给 我 们 的 感觉 
跟 阴 天 带 给 我 们 的 感觉 差不多 ， 在 色谱 上 徘 近 冷色 。 


灰色 也 是 个 很 有 意思 的 颜色 ， 如 果 把 它 弄 瞳 一 点 ， 它 就 接近 黑色 的 效果 ;如 来 把 它 变 亮 ， 则 
会 呈现 出 白色 的 特点 。 


3.3.4 BEAM A 

要 记 住 ,选择 的 颜色 对 用 户 情感 的 影响 ， 有 时 这 种 影响 取决 于 用 户 个 人 的 偏见 。 这 种 偏见 也 
许 是 由 于 茶 些 不 好 的 经 历 或 者 记忆 而 产生 的 ， 但 大 多 数 时 候 都 跟 文 化 有 关 。 

以 红色 为 例 ,也 许 我 们 总 觉得 红色 代表 了 情欲 、 屈 她 或 者 激情 ， 但 是 在 中 国 ， 这 种 颜色 走运 
气 和 喜庆 的 代表 。 在 印度 的 某 些 地 方 ， 红色 则 代表 着 功成名就 。 在 南非 ， 红 色 则 是 一 种 嘉 伤 的 颜 
色 。 在 西方 世界 妓 色 代表 着 悲哀 ， 但 是 中 国人 有 时 会 用 忍 色 来 呈现 高 品质 。 


Brandcurve 写 过 一 篇 关于 不 同文 化 中 颜色 的 不 同 含义 的 文章 ， 很 不 错 。 如 条 你 的 网 站 需要 
面 对 国 际 化 的 用 户 ， 要 记得 除了 文字 之 外 ， 还 要 给 颜色 做 本 地 化 。 


3.4 配色 方案 


不 同 的 颜色 组 合 起 来 ， 有 的 好 看 ， 有 的 不 好 看 。 配 色 方 案 其 实 就 是 一 组 组 颜色 的 组 合 ， 这 些 
组 合 能 够 在 视觉 上 吸引 观众 。 让 我 们 随意 看 看 几 种 不 同 的 配色 方案 ， 同 时 探索 一 下 它们 的 用 法 。 


在 选用 一 种 配色 方案 之 前 ,你 需要 了 解 一 定 的 色彩 理论 ， 最 好 的 方法 就 是 观察 一 个 色 轮 。 色 
轮 可 以 展示 不 同 颜色 之 间 的 不 同 关系 。 我 已 经 画 了 一 个 很 简单 的 RYB 色 轮 ， 或 者 叫 混合 色 轮 ， 
这 种 色 轮 以 红色 、 丙 色 和 监 色 作为 主 色 〈 参 见 图 3-4)。 在 这 一 章 中 ,我 会 用 混合 色 轮 来 展示 几 种 
不 同 的 配色 方案 。 





























@ http://www.brandcurve.com/color-meanings-around-the-world/, 
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图 3-4 在 混合 色 轮 上 ， 主 要 的 颜色 有 红色 、 黄 色 和 蓝 色 。 这 种 色 轮 也 经 常 称 作 RYB 色 轮 ( 另 见 彩 插 ) 
3.4.1 BRA 


单 色 方案 只 会 用 到 一 种 色调 (参见 图 3-5)。 先 选 定 一 种 色调 , 然后 再 调整 色调 的 亮度 和 饱和 
度 ， 得 到 不 同 的 变化 ， 组 合 起 来 就 成 了 单 色 方案 。 









Lorum lpsum 
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Quisque molestie risus vitae 
ipsum. Quisque egestas. Phasellus vitae 
nibh ac augue bibendum condimentum. 
Praesent risus. Nunc eleifend. Nullam erat 
massa, feugiat ac, porttitor sed, ullamcorper 
at, dui. Phasellus lobortis arcu ac magna. 
Nam dictum bibendum arcu. Pellentesque 
lobortis, felis nec dapibus laoreet, ligula 
mauris iaculis enim, quis lobortis massa 
pede nonummy tortor. Fusce justo ligula, 


图 3-5 单 色 方案 ( 男 见 彩 插 ) 
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这 种 方案 给 设计 市 来 由 洱 和 次 度 。 当 你 在 页 面 中 使 用 这 种 方案 的 时 候 ， 页 面 上 的 其 他 元 系 
(照片 、 图 标 等 ) 就 会 显得 很 突出 。 而 且 ， 制 作 单 色 方案 非常 和 测 单 ， 它 最 适合 那 种 内 容 至 上 的 站 
点 


yw O 


3.4.2 ”相似 色 方 案 


在 混合 色 轮 上 ， 一 种 颜色 两 边 的 颜色 束 是 这 种 颜色 的 相似 色 。 将 这 三 种 颜色 《基础 色 和 人 它 的 
两 个 相似 色 ) 组 合 起 来 就 成 为 相似 色 方 案 (参见 图 3-6) 。 这 种 方案 高 度 可 控 ， 同 时 色彩 的 临近 感 
也 会 加 强 整个 方案 的 效 末 。 








Lorum Ipsum 
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Quisque molestie risus vitae 
ipsum. Quisque egestas. Phasellus vitae 
nibh ac augue bibendum condimentum. 
Praesent risus. Nunc eleifend. Nullam erat 
massa, feugiat ac, porttitor sed, ullamcorper 
at, dui. Phasellus lobortis arcu ac magna. 
Nam dictum bibendum arcu. Pellentesque 
lobortis, felis nec dapibus laoreet, ligula 
mauris iaculis enim, quis lobortis massa 
pede nonummy tortor. Fusce justo ligula, 


3-6 ”相似 色 配 色 方 案 ( 另 见 彩 插 ) 





相似 色 方 案 需 要 在 色 轮 上 选取 相互 关联 的 颜色 , 一 种 颜色 作为 主 色 ,另外 两 个 跟 主 色 类 似 的 
颜色 则 起 到 了 点 缀 加 强 的 作用 。 

创造 这 种 方案 的 容 多 程度 和 创造 单 色 方 案 差 不 多 , 但 是 出 来 的 效果 会 更 好 一 些 , 因为 你 用 到 
了 不 同 的 颜色 ， 而 不 是 一 种 色调 的 不 同 变化 。 两 个 附加 色 能 够 更 好 地 衬托 主 色 ， 将 用 户 的 眼球 吸 
引 到 重要 的 内 容 上 。 
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使 用 相似 配色 方案 的 一 个 主要 问题 是 缺乏 颜色 对 比 , 特别 是 跟 互 补 色 配 色 方 案 相 比较 ,相似 
色 方 案 的 色彩 对 比 就 显得 不 是 很 明显 。 但 这 种 方案 确实 是 最 适合 初学 者 的 方案 , 创造 一 个 这 种 方 
案 不 难 ， 然 而 它 却 可 以 给 你 一 个 保险 的 色彩 疙 围 ， 不 会 发 生 色 彩 冲 突 。 


3.4.3 互补 色 方 案 


互补 色 方 案 选 用 的 是 色 轮 上 相对 的 两 种 颜色 为 基准 色 ， 这 两 种 颜色 被 看 做 是 互相 补充 的 颜 
色 。 系 色 和 黄色 是 很 好 的 互补 色 方案 ， 另 外 还 有 红色 和 绿色 。 在 图 3-7 中 你 可 以 看 到 一 个 互补 色 
配色 方案 的 例子 。 














Lorum Ipsum 
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Quisque molestie risus vitae 
ipsum. Quisque egestas. Phasellus vitae 
nibh ac augue bibendum condimentum. 
Praesent risus. Nunc eleifend. Nullam erat 
massa, feugiat ac, porttitor sed, ullamcorper 
at, dui. Phasellus lobortis arcu ac magna. 
Nam dictum bibendum arcu. Pellentesque 
lobortis, felis nec dapibus laoreet, ligula 
mauris iaculis enim, quis lobortis massa 
pede nonummy tortor. Fusce justo ligula, 


图 3-7 补充 色 配 色 方 案 ( 另 见 彩 插 ) 


互补 方案 通 第 难以 平衡 ,因为 选取 的 颜色 有 可 能 都 是 很 亮 的 颜色 , 你 需要 做 不 少 调和 工作 来 
使 之 看 上 去 协调 一 致 。 有 些 组 合 , 像 检 色 和 靛青 ， 平衡 起 来 就 非常 困难 。 如 琳 使 用 得 不 正确 ， 这 
些 难以 调和 的 颜色 就 会 显得 突 巨 ， 其 至 带 给 观众 压力 。 但 是 ， 如 末 减 少 两 种 颜色 中 冷色 系 的 饱和 
E, 同时 增 大 暖色 系 的 饱和 度 , 就 可 能 会 得 到 非常 好 的 效果 。 利 用 互补 色 配 色 方 案 的 办 法 是 选取 
其 中 的 一 个 颜色 作为 主 色调 ， 把 剩 下 的 那个 作为 辅助 颜色 来 补充 强调 主 色调 。 








28 > 第 3 章 E É 


在 使 用 这 种 配色 时 还 要 小 心 处 理 文 字 效 果 。 如 果 在 一 个 背景 色 上 使 用 的 文字 颜色 是 其 互补 
色 ， 可 读 性 会 非常 差 。 这 时 你 需要 适当 地 调整 一 下 饱和 度 。 


3.4.4 分离 互 补 色 方案 


这 种 方案 更 难 掌 握 , 但 是 很 有 意思 。 跟 互补 色 方 案 类 似 ， 如 果 对 饱和 度 和 亮度 做 了 适当 的 调 
整 ， 这 种 配色 会 非常 迷人 (参见 图 3-8)。 我 最 推荐 你 尝试 的 也 是 这 个 方案 ,因为 使 用 这 种 方案 的 
设计 很 少 ， 这 意味 着 使 用 它 很 有 可 能 让 你 的 设计 与 众 不 同 。 











Lorum Ipsum 
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Quisque molestie risus vitae 
ipsum. Quisque egestas. | Phasellus vitae 
nibh ac augue bibendum condimentum. 
Praesent r risus. Nunc eleifend. Nullam erat 
massa, feugiat ac, porttitor sed, ullamcorper 
at, dui. Phasellus lobortis arcu ac magna. 
Nam dictum bibendum arcu. Pellentesque 
lobortis, felis nec dapibus laoreet, ligula 
mauris iaculis enim, quis lobortis massa 
pede nonummy tortor. Fusce j justo ligula, 


图 3-8 分离 互 补 色 方 案 〈 另 见 彩 播 ) 
这 种 方案 指 的 是 在 色 轮 上 选择 与 主 色 的 互补 色相 邻 的 两 个 颜色 , 而 不 是 直接 选取 某 个 颜色 的 
互补 色 来 做 设计 。 


这 个 方法 除了 可 以 让 配色 具有 更 强烈 的 对 比 之 外 ,还 能 增加 色彩 的 多 样 性 。 最终 你 会 得 到 一 
个 跟 互 补 色 方案 相 比 更 有 亲和力 ， 而 且 不 那么 极端 的 配色 。 


需要 注意 的 是 应 该 避免 使 用 那些 很 无 趣 的 颜色 ， 它 们 会 影响 配色 的 整体 效 末 。 
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你 最 好 将 这 几 种 不 同 的 配色 方案 都 答 试 一 过 ， 感 受 它 们 的 效 末 。 我 最 受用 单 色 方案 ， 因 为 
我 喜欢 那 种 让 图 片 突出 的 效 末 。 你 也 可 以 发 掘 你 自己 的 最 有 过， 最 重要 的 是 要 了 解 每 个 方案 的 优 
WAS o 


3.5 MAZEE 


网 络 安全 色调 色 板 只 提供 了 216 种 颜色 ,这 些 颜 色 在 不 同 的 操作 系统 上 都 是 一 样 的 。 这 个 概 
念 起 源 于 计算 机 显卡 技术 不 够 强大 的 时 代 。Mac 机 上 的 设计 师 想 确保 对 于 同一 张 图 片 ,PC 机 用 
户 也 能 看 到 同样 的 效 末 。 然 而 ， 这 个 调 色 板 非 稍 单调 ， 限 制 太 多 ， 上 面具 有 监 、 绿 、 红 各 六 种 色 
调 的 不 同 组 合 。 

现在 设计 师 已 经 放弃 了 这 种 网 络 安全 色调 色 板 , 因为 大 多 数 用 户 的 显示 器 都 能 显示 上 百 万 种 
颜色 了 。 虽 然 不 同 的 机 右上 的 色彩 显示 还 是 有 区 别 ， 但 是 这 种 区 别 基 本 上 可 以 忽略 不 计 了 。 

少数 经 验 丰 富 的 网 页 设计 师 和 一 些 机 构 仍然 执着 于 网 络 安全 色 , 另外 有 些 图 形 图 像 程序 也 提 
供 了 一 些 选 项 ， 可 以 让 你 只 在 网 络 安 全 色 范 围 内 工作 。 岁 3-9 展示 了 Photoshop piss (注意 
左下 角 的 Only Web Colors 选 框 ) 。 不 管 你 是 自愿 还 是 不 得 不 使 用 网 络 安全 色 以 外 的 颜色 ， 都 应 该 
记 住 这 种 颜色 可 能 在 不 同 的 地 方 有 所 差别 。 
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图 3-9 Photoshop 取 色 器 提供 了 网 络 安 全 色 的 选项 (BUR HE) 


站 侍 果 公司 出 的 麦 塔 金 系 列 电脑 。 一 一 译 者 注 
安装 微软 公司 的 Windows 系统 的 个 人 电脑 。 一 -一 译 者 广 
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三 色 原 则 


我 的 祖父 曾经 做 了 多 年 的 男装 生意 。 我 很 小 的 时 候 ， 他 告诉 了 我 “三 色 原 理 ” 的 概念 。 
祖 久 的 意思 是 男装 应 该 使 用 三 种 颜色 : 首先 是 两 种 可 以 互相 补充 的 颜色 ， 然 后 还 需要 另外 一 
种 完全 不 相干 的 颜色 。 我 用 个 例子 来 说 明 吧 。 一 个 穿 了 和 白色 工 恤 的 男人 , 可 以 搭配 一 条 黑色 
的 裤子 ,同时 还 需要 一 条 黄色 领带 ,领带 上 可 能 还 有 点 黑色 和 和 白色 的 点 级 ,这样 整 个 人 就 会 
显得 更 有 活力 。 

现在 当 我 在 做 网 站 设计 的 时 候 ， 总 会 想起 这 个 理论 。 我 会 挑 一 个 背景 色 和 一 个 前 景色 ， 
同时 选择 另外 一 种 颜色 。 第 三 种 颜色 需要 有 一 种 加 强 的 效果 ,需要 看 起 来 很 出 挑 。 比 如 你 可 
以 用 蓝 色 和 灰色 来 做 主 色调 ,然后 用 黄色 来 做 加 强 色 。 在 页 面 上 , 你 可 以 用 不 同 的 蓝 色 和 黑 
色 来 确定 一 个 对 象 ， 并 使 之 显得 尤为 突出 。 


注意 ， 我 的 意思 并 不 是 说 设计 里 就 只 能 用 我 说 的 这 几 种 颜色 。 


3.6 ”创建 配色 方案 


现在 你 有 了 一 些 色 彩 理论 的 概念 , 应 该 可 以 开始 思考 Foodbox 的 颜色 搭配 了 。 你 也 已 经 知道 
怎么 用 色 轮 来 发 掘 色彩 组 合 了 ， 但 我 还 是 要 介绍 一 下 我 挑选 颜色 时 用 到 的 技巧 。 








就 像 乙 前 做 页 面 设 计时 那样 ， 我 们 需要 将 几 个 配色 方案 拿 到 老板 跟前 ， 让 他 们 挑选 。 这 里 介 
绍 两 种 选 色 方法 : 技术 法 和 自然 选择 法 。 


3.6.1 用 技术 法 选择 颜色 


技术 选 色 法 是 ， 基 于 色彩 理论 来 创造 配色 方案 。 先 挑选 一 个 基础 色 ， 然 后 用 3.4 廊 中 讨论 过 
的 方案 中 的 一 种 来 给 基础 色 搭 配 组 合 。 再 后 调整 亮度 、 饮 和 度 和 对 比 度 ， 协 调 颜 色 混搭 。 这 听 起 
来 可 能 比较 难 ， 但 古 在 一 些 很 棒 的 软件 的 帮助 下 ， 所 有 的 过 程 其 实 比 想象 的 简单 得 多 。 


HTML 颜色 代码 


HTML 中 的 颜色 用 三 个 十 六 进 制 数 玉 表示 。 第 一 个 数 代表 红色 ,第 二 个 数 代表 绿色 ， 第 
= EB, 

VAHFF0000 为 例 ， 这 个 代码 的 显示 效果 是 红色 ， 因 为 第 一 个 数 是 有 数值 的 ， 而 后 面 两 个 
数 的 值 都 是 0。 每 个 数 的 值 都 在 0~255 之 间 ， 所 以 这 里 的 红色 值 是 FF (最 大 值 ， 最 红 ) 00 
(没有 绿色 ) 和 00 (没有 蓝 色 )， 
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这 种 方法 其 实 是 在 用 色彩 理论 来 建立 我 们 自己 的 调 色 板 。 直 觉 并 不 比 算 法 和 规则 来 得 有 效 ， 
所 以 如 朱 你 觉得 自己 的 艺术 感 没 那么 强 , 这 将 会 古 一 种 好 方法 。 当 我 手边 没有 图 片 来 激发 灵感 的 
时 候 ， 我 也 会 用 这 种 方法 来 快速 地 建立 一 种 配色 方案 。 

写 程序 的 时 候 ， 我 们 会 用 IDE 之 类 的 东西 来 让 工作 变 得 简单 一 些 。 当 然 你 可 以 用 记事 本 来 
写 代 码 ， 但 是 面 对 一 个 大 型 项 目的 时 候 ， 用 记事 本 写 代 码 就 会 吕 得 比较 狗 狂 了 。 同 样 的 道理 ， 
你 可 以 以 一 个 色 轮 为 基础 来 手工 打造 一 个 配色 方案 ， 你 也 可 以 借助 某 些 色彩 工具 来 协助 你 做 这 
LET 


在 网 络 上 你 能 找到 很 多 的 配色 工具 ， 我 推荐 ColorSchemeDesigner.com” 。 这 个 网 站 的 用 户 界 
面 能 帮助 你 快速 创造 一 套 配 色 方 案 ， 并 且 还 可 以 用 各 种 格式 输出 ， 其 中 包括 Photoshop 的 调 色 板 
格式 。 在 浏览 器 中 打开 这 个 网 页 ， 我 们 马上 就 要 用 。 

1. 选择 一 个 色 轮 

在 图 3-10 中 ， 左 侧 是 一 个 传统 的 RYB 色 轮 ， 右 侧 是 一 个 加 法 混 色 (或 者 叫 RGB) 色 轮 。 设 
计 配 色 方 案 的 时 候 ， 你 需要 从 中 选择 一 个 。 那 么 ， 你 能 看 出 其 中 的 区 别 吗 ? 





Mac 和 色彩 

PC 显示 器 的 gamma 默认 值 是 2.2， 但 是 Mac 的 屏幕 一 向 用 的 gamma 值 是 1.8。 这 个 差 
Hibs a Mac 屏幕 上 面 显 得 更 不 饱和 。 但 是 ， 自 从 Snow Leopard 开始 ，Mac 显示 器 的 默 
认 gamma 值 跟 PC 一 样 了 。 如 果 你 在 用 Mac OS X 的 早期 县 本， 你 应 该 考虑 将 屏幕 gamma 
值 调 成 2.2。 在 系统 偏好 设置 (System Preferences) 里 的 显示 属性 (Display Properties) 里 可 
以 调整 。 即 便 Mac 做 出 了 这 样 的 调整 ， 你 还 是 应 该 在 不 同 的 系统 上 测试 颜色 的 显示 效果 ， 
以 确保 颜色 不 会 有 饱和 度 过 度 或 者 不 足 的 问题 。 


两 个 色 轮 中 的 互补 色 是 不 一 样 的 ! 如 果 你 以 RYB 色 轮 为 基础 ， 选 择 以 黄色 为 基准 色 的 互补 
色 方 案 ， 黄 色 的 互补 色 是 紫色 。 但 是 如 果 用 的 是 RGB 色 轮 ， 那 么 黄色 的 互补 色 则 是 蓝 色 。 这 种 
差别 是 设计 师 和 开发 者 要 面临 的 烦恼 之 一 ,特别 是 当 人 们 不 知道 这 两 种 色 轮 的 区 别 的 时 候 , 烦恼 
尤其 。 其 至 有 些 人 把 两 个 色 轮 当 作 一 回 事 ， 那 就 更 糟糕 了 。 

设计 师 们 为 选择 哪 种 色 轮 来 开发 配色 方案 争论 不 休 。 有 人 认为 用 RYB 色 轮 创造 的 色彩 方案 更 
能 吸引 眼球 ,因为 这 个 色 轮 是 传统 画家 和 设计 师 用 的 , 所 以 人 们 对 它 比 较 熟 悉 。 另 外 一 些 人 则 和 争辩 
说 做 网 站 设计 的 时 候 应 该 用 RGB 色 轮 ， 因 为 它 更 加 惟 确 地 反应 了 色彩 在 电脑 屏幕 上 的 至 现 效 朱 。 











@ http://www.colorschemedesigner.com/ , 
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| 3-10 RYB 和 了 RGB Es ( 另 见 彩 插 ) 


那么 ， 你 应 该 用 哪 种 色 轮 呢 ? 比较 偷懒 的 回答 是 ， 只 要 你 是 在 电脑 上 做 网 站 设计 ,并 且 是 以 
屏幕 上 的 颜色 为 难 ， 那 么 用 哪 种 都 无 所 谓 。 你 在 本 章 前 面 看 到 的 所 有 配色 方案 都 是 用 RYB 色 轮 
设计 的 , 但 是 用 RGB 色 轮 也 可 以 得 到 很 好 的 结果 。 就 算是 在 线 的 配色 工具 用 的 也 是 不 同 的 色 轮 。 
ColorSchemeDesigner.com 提供 的 取 色 器 用 的 是 RYB 的 ， 本 书 里 我 们 会 用 这 个 工具 来 建立 自己 的 
配色 方案 。AdobeKuler 使 用 的 是 RGB 色 轮 。 你 可 以 随意 试验 ， 但 是 一 旦 选择 了 一 个 色 轮 ， 那 么 
在 整个 网 站 的 设计 过 程 中 就 不 要 再 变 了 。 

2. 建立 配色 方案 


配色 的 新 手 可 能 会 觉得 迷 届 ， 该 从 哪里 下 手 呢 ?你 可 以 从 3.3 市 中 学 到 的 关联 性 开始 。 思 攻 
一 下 ， 当 你 想到 食物 的 时 候 ， 什 么 颜色 会 自然而然 地 出 现在 脑海 中 : 是 不 是 有 橙色 、 绿 色 、 红 色 
和 黄色 。 那 我 们 就 从 一 种 经 过 变化 的 黄色 作为 基础 色 开 始 吧 。 


你 可 以 从 ColorSchemeDesignercom 页 面 左 侧 的 色 轮 中 随意 选择 一 个 点 作为 配色 方案 里 的 基 
础 色 。 选 择 一 种 颜色 之 后 ,页 面 右 侧 的 方块 里 的 颜色 会 随 之 变化 , 方块 里 的 预览 可 以 让 你 对 几 种 
颜色 的 搭配 有 个 印象 。 


如 来 已 经 知道 了 需要 选用 的 颜色 的 十 六 进 制 代码 ， 那 么 就 可 单 击 色 轮 右 下 角 的 RGB 链接 ， 
在 跳出 的 对 话 框 中 输入 数值 。 如 琳 基 础 色 是 从 其 他 地 方 选择 而 来 的 一 一 像 古 照片 或 者 其 他 网 页 什 
么 的 ， 而 你 需要 以 这 个 颜色 为 基础 快速 地 建立 一 套 配 色 方 案 ， 那 么 这 个 功能 很 有 用 "。 我 们 会 用 
颜色 证 FE500 作为 基础 色 , 这 是 一 种 桶 黄色。 你 可 以 随意 选择 上 自己 的 方案 , 或 者 跟着 我 的 步骤 走 ， 
在 对 话 框 里 输入 这 个 十 六 进 制 代码 。 














© 在 这 里 ， 颜 色 会 有 一 点 改变 ， 因 为 无 法 将 RGB 颜色 代码 毫 无 误差 地 转换 为 RYB 颜色 。 然 而 这 个 页 面 上 的 RYB 
颜色 也 是 显示 在 屏幕 上 的 ， 所 以 这 种 改变 几乎 无 法 被 人 察觉 。 
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绿色 、 黄 色 和 橙色 在 色 轮 上 是 相 邻 的 。 你 应 该 已 经 知道 ,用 相 邻 的 颜色 可 以 创建 一 个 相似 色 
配色 方案 ， 这 个 方案 的 一 个 好 处 是 符合 我 们 前 面 提 到 过 的 三 色 原 则 。 在 页 面 上 把 方案 从 单 色 
(mono) 改 成 相似 色 (analogic) ， 这 样 方案 就 拥有 不 同 种 类 的 焉 色 、 橙 色 和 绿色 ， 更 具 多 样 性 。 


色 轮 上 的 每 个 相 邻 色 之 间 的 间隔 都 是 默认 的 30”, 你 也 可 以 拖 动 相 邻 色 点 让 这 个 角度 变 小 或 
者 变 大 。 增 大 角度 可 以 让 对 比 更 加 强烈 。 如 有 果 你 一 时 半 会 儿 还 找 不 到 可 以 抓 住 眼球 的 颜色 ， 可 以 
多 试 儿 次 。 

另外 ， 还 应 该 调整 饱和 度 和 亮度 ， 看 看 这 些 调整 对 整个 配色 方案 有 怎样 的 影 啊 。 通 常 取 色 妖 
会 自己 挑选 一 些 不 同 的 亮度 和 饱和 度 ， 也 可 以 单 击 Adjust Scheme (调整 方案 ) 标签 ， 在 里 面 自 
行 调整 。 随 意 挪 动 一 下 请 块 ， 试 试 各 种 设 定 值 。 记 得 要 降低 所 选 颜色 的 饱和 度 ， 还 要 降低 亮度 让 
它们 看 起 来 瞳 一 点 。 从 技术 角度 来 看 , 调整 亮度 和 饱和 度 后 的 任意 色调 都 症 可 以 用 来 放 在 方案 里 
HY. 


从 图 3-11 HAT LA Sait: — 














3-11 ColorSchemeDesigner.com AY RX f 4, KIA — PAA i eH (LR) 





你 总 会 希望 对 方案 做 出 一 些 调整 ,电脑 自动 生成 的 配色 可 能 看 上 去 不 太 对 劲 , PL NAR Se 
电脑 来 完成 这 个 工作 ， 就 像 在 写 应 用 程序 的 过 程 中 ， 你 不 想 依赖 目 动 生成 的 代码 一 样 。 

熟悉 了 那些 关于 颜色 的 选项 之 后 , 可 以 将 完成 的 方案 存 起 来 , 下 次 再 磁 到 需要 为 设计 挑选 颜 
色 的 时 候 ， 还 可 以 拿 出 来 参考 。 
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选择 Export (导出 ) 标签 ， 挑 一 个 导出 格式 ， 我 建议 用 ACO (Photoshop 调 色 板 格式 ) ， 这 
样 ， 在 做 样式 页 的 时 候 ， 就 可 以 将 这 些 配色 作为 选 色 样 本 了 。 


每 个 方案 都 有 一 个 URL 供 你 下 次 访问 。 如 采 你 想 使 用 我 为 本 书 的 例子 选用 的 配色 方案 ,也 
请 访问 ColorSchemeDesigner.com”。 当 然 ， 你 也 可 以 参考 本 章 后 面 的 图 3-18, 





3. 用 Adobe Kuler 进 行 下 一 步 探索 


如 果 想 用 一 个 基于 RGB 色 轮 的 配色 软件 ,那么 可 以 试 试 Adobe Kuler”( 参 见 图 3-12)。 你 也 
可 以 选择 一 个 基础 色 , 挑选 一 个 方案 种 类 , 然后 Kuler 会 为 页 面 生 成 一 个 之 有 5 种 颜色 的 调 色 板 ， 
你 可 以 调整 调 色 板 中 每 种 颜色 的 亮度 和 饱和 度 。 同 样 ， 你 也 可 以 保存 这 个 调 色 板 , 或 者 把 调 色 板 
跟 其 他 人 分 至 。 


(ke kuler 


Create Select a Rule 
From a Color 





3-12 ”使 用 Abobe Kuler 选取 颜色 ( 另 见 彩 插 ) 





还 有 其 他 的 工具 可 以 帮助 你 来 完成 网 站 的 配色 。 所 以 在 继续 到 下 一 步 之 前 , RAN VOR AA A 
一 种 选择 配色 方案 的 方法 : 自然 选择 法 。 


D 我 使 用 的 Photoshop ACO 文件 可 以 从 http://www.webdesignfordevelopers.com/colors/ 网 站 下 载 。 
@) http://colorschemedesigner.com/#1C51Tyi-----y, 
@) http://kuler.adobe.com, 
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3.6.2 用 目 然 选择 法 选择 配色 


色彩 理论 是 很 不 错 ， 但 老 是 依照 理论 来 选 颜色 最 后 也 免不了 和 觉得 无 聊 或 者 太 “ 技 术 ” 了 。 目 
然 选择 或 自然 扒 配 方法 指 的 征 ， 有 一 个 参考 物 一 一 多 数 情况 下 古 照 片 ， 然 后 从 这 个 参考 物 中 选择 
颜色 来 组 成 自己 的 配色 方案 。 这 种 方法 是 除 色彩 理论 外 另 一 个 流行 的 色彩 选择 方法 。 用 这 种 方法 ， 
可 以 得 到 很 惊人 的 效果 , 但 是 这 也 取决 于 你 选 的 照片 或 者 灵感 来 源 的 好 坏 。 当 然 , 熟悉 色彩 理论 
也 是 有 帮助 的 。 根 据 理论 ,你 就 可 以 调整 闫 色 使 其 达到 设计 方案 的 要 求 。 用 这 种 方法 可 能 会 更 耗 
时 ， 因 为 经 常会 从 来 源 图 片 里 选 到 不 合适 或 者 不 好 看 的 闫 色 。 

自然 选 择 法 的 最 大 好 处 就 是 可 以 跟 目 然 合作 ， 比 如 用 一 张 食物 的 图 片 作为 来 源 , 图片 里 的 颜 
色 已 经 浑然 一 体 ， 而 且 源 于 自然 的 颜色 解读 起 来 一 点 也 不 难 。 所 以 下 次 出 门 时 ,记得 好 好 看 看 门 
外 的 颜色 。 


W 小 乔 爱问 
J 色盲 用 户 怎么 办 


选择 配色 的 时 候 ， 也 要 考虑 到 色盲 用 户 , 而 且 这 一 点 很 重要 ,特别 是 当 你 仅 使 用 配色 来 
吸引 用 户 注 意 的 时 候 。 在 16.2 节 中 ,我 会 谈 到 这 个 问题 ， 你 可 以 用 那 一 节 里 所 提 到 的 技巧 
来 测试 你 的 配色 。 另 外 ， 我 们 用 的 取 色 软件 里 也 有 模拟 多 种 色盲 症 的 模式 。 


寻找 颜色 
拿 起 数码 相机 去 外 面 走 走 ， 下 面 这 些 地 方 很 适合 探索 颜色 搭配 。 
口 花园 
去 寻访 大 学 校园 、 公 园 或 者 植物 园 ， 那 里 丰富 而 多 彩 的 颜色 是 探寻 自然 配色 的 理想 
地 方 。 
口 动物 园 
去 动物 园 拍 些 动 物 的 照片 吧 。 虎 、 雪 狗 、 孔 稚 等 一 些 动 物 比 你 想象 中 还 要 多 次 多彩 ， 
口 忙碌 的 街道 
车 、 交 通 标志 和 建筑 部 可 以 拍 一 拍 。 一 条 灰色 的 城市 街道 往往 承载 着 丰富 的 颜色 ， 
比 你 上 班 走路 时 注意 到 的 颜色 要 多 得 多 。 
这 些 活动 有 两 个 目的 ,一 是 强迫 自己 去 观察 周围 的 世界 ,二 是 让 那些 自然 界 中 的 颜色 来 
激发 灵感 。 
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我 们 来 熟悉 一 下 这 个 自然 选择 法 ， 你 可 以 学 习 如 何在 设计 中 使 用 它 。 我 从 MorgueFile 网 站 
上 面 取 了 一 张 图 。Morguefile 是 一 个 很 好 的 图 片 网 站 ， 其 中 很 多 图 片 都 可 以 免费 使 用 。 


看 看 吧 ， 你 能 从 这 张 图 片 里 得 到 多 少 种 颜色 。 有 亮 绿 ， 草 每 红 ， 还 有 瞳 一 点 的 乍 每 色 和 浅 一 
点 的 面包 皮 色 。 啊 ， 从 图 片 背 景 里 面 甚 至 还 能 得 到 灰色 。 


你 可 以 手动 将 颜色 都 提取 出 来 , 也 可 以 要 个 小 聪明 , 用 软件 来 帮助 你 做 这 件 事 。 在 图 3-13 里 ， 
你 可 以 看 到 我 用 Adobe Illustrater 里 的 Eyedropper 工具 手动 选 出 来 的 颜色 ， 但 是 这 种 方法 有 时 候 
会 太 慢 , 会 让 人 不 耐烦 : 首先 要 用 Eyedropper 工具 选 出 一 个 区 域 ， 然 后 才能 在 颜色 选择 器 中 找到 
颜色 的 代码 值 。 还 好 ， 我 们 另 有 捷径 。 





S| || | Ue 


4 d 


3-13 ”从 一 张 图 片 中 取出 的 颜色 [ 原 图 来 自 MorgueFile (http://www.morguefile.com)] ( 另 见 彩 插 ) 


1. 用 ColorSchemer Studio 轻 松 抓 取 颜 色 


ColorSchemer Studio 有 一 个 功能 叫做 PhotoSchemer (图 片 配色 器 ) ， 这 个 功能 可 以 以 一 张 你 
提供 的 图 片 为 基础 自动 创建 配色 方案 。 仔 细 观 察 上 面 那个 草 每 的 图 片 后 发 现 , 在 这 张 照 片 提供 的 
可 用 颜色 中 ， 章 每 上 的 红色 太 多 。 可 能 黄色 或 者 橙色 会 更 平易 近 人 一 些 。 于 是 我 自己 动手 拍 了 一 
张 由 和 葡萄、 芝士 和 胡 葛 下 组 成 的 照 上 请。 葡萄 的 绿 和 芝士 的 奶 黄色 可 能 会 带 来 一 个 更 谭 亮 的 配色 方 
ze 


yo 


© http://www.morguefile.com/archive/?display=111353, 
© 如 果 最 终 决 定 在 设计 中 使 用 MorgueFile 的 图 片 , 你 需要 先 去 看 看 它 的 使 用 许可 。 网 站 没有 单独 说 明 你 需要 得 到 摄 
影 者 的 许可 ， 但 是 还 是 联系 一 下 原作 者 为 好 。 
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去 网 站 上 把 图 3-14 中 的 照片 下 载 下 来 ”( 右 键 单 击 图 像 ， 选 择 “ 图 片 男 存 为 ， 然 后 把 图 片 
存 到 桌面 上 以 便 查找 )。 





3-14 ”我 为 这 个 项 目 所 拍摄 的 照片 ( 另 见 彩 插 ) 


现在 准备 工作 做 好 了 ， 你 可 以 开始 尝试 ColorSchemer Studio 中 的 PhotoSchemer 功能 了 。 


(1) 首先 ， 开 打 ColorSchemer Studio”， 在 工具 栏 中 单 击 Quick Preview (快速 浏览 ) 按钮 (或 
者 用 快捷 键 Ctrl+P)。 

(2) 单 击 工具 栏 中 的 PhotoSchemer (HAME) 按钮 (或 者 用 快捷 键 Ctrl+H) ， 局 用 该 功能 。 

(3) 单 击 Open (打开 ) 按钮 ， 载 入 刚刚 下 载 的 图 片 ， 图 片 配色 如 功能 会 显示 这 张 图 片 并 提供 
一 个 有 四 种 颜色 的 配色 方案 。 

(4) 你 可 以 把 每 种 颜色 都 拖 到 Quick Review (Riki bt) 窗口 中 去 ， 以 便 查看 它 在 配色 方案 
中 的 效果 。 你 也 可 以 增加 颜色 选择 点 的 数量 ， 最 多 可 以 达到 9 个 。 

同时 ， 你 还 可 以 手动 调整 选择 色彩 。 如 采 移 动 了 一 个 颜色 选择 点 ， 在 颜色 方案 中 的 相应 颜色 
也 会 发 生 改 变 。 

(5) 试 试 各 种 颜色 组 合 ， 直 到 找到 你 满意 的 方案 。 要 记得 用 学 过 的 颜色 对 比 理论 。 你 也 可 以 
看 看 图 3-15 中 我 选择 的 方案 。 


D http://www.webdesignfordevelopers.com/files/color/grapes_cheese_carrots.jpg, 


© 目前 ColorSchemer Studio 已 经 更 新 到 2.1.0 版 本 ， 操 作 跟 下 述 的 步骤 略 有 不 同 。 译 者 注 
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File Edit Adiust Tools view Helo 


F | PhotoSchemer 


GE O Open... | [E] Mosaic Mode | [E] Randomize! [E Add to Favs | # Colors: Ev | 
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Ww Color Schemer Studio - [untitled] ; E a ola) 
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Web Page Color Preview 





Header Text 


Body Header 


This is the main text of 
the body of your page. 


3-15 用 ColorSchemer 的 图 片 配色 器 功能 从 照片 中 抓 取 颜色 ( 另 见 彩 插 ) 


(6) 得 到 满意 的 颜色 之 后 ， 单 击 Add to Favorites 〈 收 藏 ) 按钮 ， 把 颜色 放 到 程序 的 主 窗口 中 
去 (参见 图 3-16)。 





Wm Color Schemer Studio - [untitled] = = | 口 | x] 
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图 3-16 用 ColorSchemer Studio， 以 一 些 颜色 为 基础 来 创建 配色 方案 。 多 多 党 试 ， 
用 任何 你 想 要 尝试 的 颜色 来 建立 不 同 的 方案 ( 男 见 彩 插 ) 


3.7 选择 一 个 方案 号 39 


(7) 选择 View (查看 )> Color Wheel Mode( 色 轮 模式 .) , AIA JE Computer Color Wheel (RGB, 
计算 机 色 轮 ) 选项 。 这 样 才 能 确保 选择 的 颜色 是 合适 的 。 

好 了 ， 现 在 你 应 该 有 了 所 有 的 颜色 和 它们 的 HTML 代码 了 。 你 可 以 把 这 些 代 码 复制 到 剪贴 
板 上 ， 也 可 以 用 ColorSchemer Studio 再 做 一 些 配 色 方 案 。 我 们 手头 要 做 的 只 剩 选 择 File (文件 ) 
> Save (保存 ) ， 将 目前 这 个 配色 方案 保存 下 来 。 

2. 将 自然 选择 和 色彩 理论 结合 起 来 

你 可 以 将 这 两 种 方法 结合 使 用 ,以 创造 一 个 漂亮 的 配色 方案 。 先 用 ColorSchemer Studio 从 图 
片 抓 取 合适 的 颜色 ， 用 这 个 颜色 为 基础 ， 在 ColorSchemer Studio 或 者 线 上 工具 中 创造 配色 方案 。 
Adobe Kuler 也 可 以 从 上 传 的 图 片 中 提取 颜色 ， 然 后 调整 颜色 ， 搭 配 出 一 个 方案 。 在 图 3-17 中 ， 
你 可 以 看 到 具体 的 功能 。 








(ew kuler 


Create 


From an image 
en 





3-17 使 用 Adobe Kuler 中 的 图 片 功 能 ( 男 见 彩 插 ) 


建立 配色 方案 的 过 程 具有 很 强 的 实验 性 质 , 可 能 最 后 得 到 的 结果 跟 你 选择 的 初始 色彩 大 相 径 
隆 。 但 十 只 要 练 得 越 多 ， 藤 后 出 来 的 效 采 就 会 越 好 。 慢 慢 地 ， 你 下 可 以 摆脱 工具 ， 攒 看 目 己 的 直 
觉 创 造 出 一 个 民 好 的 方案 。 


3.7 ”选择 一 个 方案 


我 想 你 已 经 了 解 , 通过 这 两 种 途径 来 为 网 站 建立 配色 方案 是 一 件 多 么 容易 的 事情 。 现 在 要 做 
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的 是 从 这 些 结 采 中 选取 一 个 方案 ， 以 便 接 下 来 完成 样 却 页 的 制作 。 融 目前 的 结 末 来 看 ， 我 觉得 根 
据 色彩 理论 创造 出 来 的 亮 一 点 的 配色 方案 最 适合 我 们 的 网 站 。 那么 在 本 书 接 下 来 的 例子 中 , Ri 
ARABS. MREZE, Ab KB. 


3.7.1 前 景色 和 背景 色 


你 必须 学 虑 为 链接 和 文字 选择 恰当 的 颜色 ,好 让 它们 更 可 读 。 瞳 色 背 景 配 明亮 的 前 景色 ， 反 
之 亦 然 。 前 景色 和 背景 色 的 对 比 越 强 烈 ， 用 户 看 起 来 就 越 容易 。 

要 记 住 ,你 的 终极 目标 是 建立 一 个 可 用 的 网 站 ,如 末 前 景色 和 背景 色 太 过 相近 ， 用 户 可 能 就 
跑 去 点 后 退 按 钮 了 。 你 在 配色 方面 上 已 经 伦 了 不 少时 间 ， 所 以 不 要 在 这 一 步 功 亏 一 筑 。 








3.7.2 ”链接 


链接 要 和 页 面 上 的 其 他 内 容 有 着 不 同 的 颜色 , 这 样 才 能 显得 突出 。 要 芳 虑 的 不 仅仅 是 链接 的 
颜色 ,还 有 它们 的 不 同 种 类 : 访问 过 的 链接 、 





可 用 链接 ,还 有 鼠标 划 过 时 的 链接 一 一 通常 Header #FFE500 | | 
说 来 ,鼠标 划 过 链接 的 时 候 ， 链 接 的 颜色 会 E 
发 生变 化 。 Sidebar #FFDD7F| | 


当 用 相似 色 和 单 色 方案 的 时 候 ， 其 实 
链接 颜色 的 可 选 汇 围 是 受到 限制 的 。 一 个 
比较 实在 的 方法 征用 亮度 和 对 比 度 的 差别 
来 区 别 用 户 已 访问 和 未 曾 访 问 的 链接 。 你 
可 以 将 已 访问 过 有 的 链接 受 成 痰 一 扩 的 闫 
色 , 这 样 就 能 突出 还 没有 被 访问 过 的 链接 ， 


Main #FFF8E4 | | 





Heading #414D00 J 


Text #000000 i 





只 是 要 注意 对 比 度 的 跨度 ， 好 让 用 户 能 Links #4D3900 i 
得 出 区 别 。 

在 图 3-18 中 ， 我 列 出 了 在 这 个 教程 中 Visited Links #806F40 [J 
使 用 的 所 有 颜色 。 当 然 , 如 果 你 具有 尝试 精 
神 , 也 可 以 用 喜爱 的 颜色 创造 一 个 这 样 的 列 Hover Links #807940 [J 





He MAIR CA GAAS a coun amma spstng secon 
a E E E EE eee .3 里 我 将 会 用 到 这 些 颜色 来 完成 示例 。 你 
色 , 这 样 在 以 后 做 样式 页 或 者 写 样式 表 的 时 i 


fe, ARE IAA AB 方案 ( 男 见 彩 插 ) 
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3.8 小结 


在 这 章 里 面 ， 你 学 到 了 关于 色彩 的 原理 、 色 彩 与 情绪 以 及 建立 网 页 配色 方案 等 方面 的 知识 。 
现在 你 已 经 选 好 了 为 项 目 准 备 的 颜色 ， 应 该 可 以 开始 搭建 样式 页 面 了 。 但 古 在 那 之 前 ,还 需要 补 
充 一 下 关于 排版 和 字体 方面 的 概念 ， 这 样 才 能 保证 给 老板 们 看 的 样式 页 是 精益 求 精 的 。 
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你 能 找 得 到 的 专注 于 讲 排版 的 书 不 计 其 数 ,， 这 方面 的 知识 既 复 杂 又 帝 奥 ， 有 些 人 穷 其 一 生 都 
在 研究 它们 。 我 们 可 不 用 这 样 ， 虽然 要 建 网 站 写 程序 ,但 是 我 们 只 需要 知道 关于 排版 、 印 刷 的 基 
MAHIA T o EREZIE, 我 们 需要 知道 如 何 去 应 用 这 些 知 识 。 除了 为 Foodbox 选择 字体 之 外 ， 
我 们 还 需要 保证 阅读 网 站 过 程 的 流 物 性 ， 并 保证 网 站 本 时 的 可 读 性 。 

排版 不 仅仅 古 字 体 的 选择 , 排版 的 真正 意义 在 于 使 你 的 内 容 具 有 可 读 性 。 文 字 是 应 用 用 户 界 
面 的 核心 ， 所 以 你 对 用 户 界 面 的 要 求 会 直接 影响 到 对 于 字体 样式 、 大 小 和 空间 等 方面 的 选择 。 传 
统 意 义 上 ， 排 版 师 的 工作 是 将 关于 排版 的 理论 运用 在 设计 当中 ， 让 阅读 文字 变 得 尽 可 能 地 简单 。 
不 管 页 面 有 多 么 吝 亮 ， 如 采 上 面 的 文字 连 看 都 疫 法 看 ， 那 作为 设计 师 ， 你 一 定 征 失败 的 。 


4.1 深入 字体 
如 果 你 搞 清 楚 了 字体 的 几 个 基本 概念 ， 那么 挑选 一 个 好 看 可 读 的 字体 将 变 得 很 容易 。 成 千 上 
万 的 字体 中 , 只 有 少数 几 个 是 合适 的 选择 ; 其 中 有 些 适 合 做 标题 或 招贴 画 , 有 些 适 用 于 大 段 文本 。 


所 有 的 字母 都 是 基于 一 条 基准 线 的 (参见 图 4-1)， 而 小 写字 母 x 的 高 则 被 用 来 定位 等 分 线 。 
等 分 线 和 基准 线 之 则 的 高 度 被 称 作 一 种 字体 的 x 高度。 











a 
2L 


等 分 线 7 上 升 部 分 


etna 基准 线 


4-1 字体 的 组 成 部 分 
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如 条 相对 大 写 的 X 来 说 , 一 种 字体 中 的 小 写 x 显 得 很 高 , 那么 通 稼 会 说 这 种 字体 拥有 比较 大 
的 x 高 度 ,很 多 设计 师 都 认为 x 高 度 比较 大 的 字体 更 容易 阅读 , 因为 有 些 字 母 分 辩 起 来 会 更 简单 。 
但 是 也 要 注意 ， 如 果 字 体 的 x 高度 过 大 , 单词 的 可 读 性 将 变 得 极 差 .， 因为 这 种 字体 组 成 的 文字 看 
起 就 跟 全 大 写 的 文本 一 样 。 正 常 的 句子 (It’s much easier to read a sentence composed of mixed-case 
letters.) 比 全 大 写 的 句子 (ASENTENCE COMPOSED ENTIRELY OF CAPITAL LETTERS.) 读 起 
REEDS o 


有 的 小 写字 母 (如 q 和 p) SZALE IA) PRE; DINEAR fA d 这 种 向 上 延 
伸 高 过 X REM NS BE, AETR TAE x EA) Ss BES wl TRE, AIK 
种 字母 可 能 会 妨碍 甚至 遮 住 不 跟 它 们 在 一 条 线 上 的 字母 。 
4.2 ”字体 类 别 


作为 网 页 开发 人 员 ， 主 要 需要 关注 三 种 字体 : 衬 线 字体 、 无 衬 线 字体 和 等 宽 字 体 。 这 三 种 字 
KEATS, 你 要 做 的 是 在 设计 网 页 的 时 候 考 虑 到 这 些 优 缺 点 。 跟 编程 和 设计 所 涉及 的 其 他 东西 
一 样 ， 字 体 也 只 是 一 种 工具 ， 重 要 的 是 要 用 合适 的 工具 解决 相应 的 问题 。 


4.2.1 REF 


笠 线 字体 (serif font) (RAFU, TAPE a SA RhE at (BS 
见 图 4-2). PFEF BE EC BY = AR EE mA EGP Se. 微软 的 正和 Word 
软件 的 默认 字体 Times New Roman 就 古典 型 的 诗 线 字体 。 然 而 这 种 字体 是 为 印刷 而 设计 的 ， 在 


电脑 屏 项 上 它 的 表现 可 不 怎么 样 。 

















4-2 衬 线 字体 的 示例 
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付 线 字体 的 主要 问题 是 , ABELL AAAS Em (BR LIF BED i, BIR Pic FA 
RE 
付 线 字体 是 一 种 可 读 性 很 高 的 字体 。 

在 做 标题 、Logo 的 时 候 ， 或 者 古 需 要 很 大 文字 的 地 方 ， 衬 线 字体 还 是 很 不 错 的 ， 它 给 人 一 
种 优雅 、 权 威 的 感觉。 


阅读 障碍 症 患者 可 能 更 喜欢 打印 出 来 的 衬 线 字体 ， 这 种 字体 中 字母 的 独特 性 使 其 更 好 辨认 。 
4.2.2 无 衬 线 字体 


无 衬 线 字体 (sans-serif font) 中 的 字母 笔画 从 头 到 尾 都 是 均匀 的 。 顾 名 思 义 ， 这 种 字体 就 是 
“ 设 有 衬 线 ” 的 字体 (参见 图 4-3)。Arial 和 Helvetica (RS AW AeA eK, Verdana 也 是 无 衬 
线 字体 。 





hello 








4-3 ”无 讨 线 字体 示例 


无 讨 线 字体 适合 在 屏幕 上 阅读 ， 所 以 它们 是 网 站 主要 内 容 的 首选 字体 。 其 至 在 字号 很 小 的 时 
候 ， 你 也 能 很 容易 地 陪读 无 付 线 字体 形成 的 内 容 。 


4.2.3 等 宽 字 体 


在 诸如 Courier 一 类 的 等 宽 字 体 (fixed-width font 或 Monospaced font) 中 ， 每 个 字母 所 占 的 
横 癌 空间 都 是 相同 的 。 比 如 字母 1 和 字母 和， 虽然 在 衬 线 字 体 中 它们 的 宽 窗 区 别 很 大 ， 但 是 在 等 
宽 字 体 中 ， 它 们 所 占用 的 横 癌 空间 是 一 样 的 。 这 种 字体 很 适合 显示 源 代 码 ， 或 者 是 用 来 展现 通过 
E-mail 发 送 、 内 容 只 有 文字 的 发 票 。 











4.3 字体 限制 及 应 对 方法 d 45 


看 看 下 面 两 张 发 票 〈 参 见 图 4-4)， 其 中 一 个 采用 了 名 为 Myriad Pro 的 衬 线 字体 ， 男 一 个 用 的 
则 古 名 为 Courier New 的 等 宽 字 体 ， 两 张 发 票 的 内 容 痢 是 一 样 的 。 可 以 看 出 用 等 宽 字 体 的 发 票 更 
好 读 一 些 ， 因 为 每 个 字母 所 占 的 宽度 空间 古 一 样 ， 这样 的 排列 看 起 来 刚刚 好 。 男 外 ， 采用 等 完 字 
体 所 形成 的 列 看 起 来 也 很 清爽 。 








Thank you for your order! Thank you for your order! 
Item Qty Price Item Qty Price 
Novelty Flying Disc 1 $5.00 Novelty Flying Disc 1 $5.00 
Adhesive Bandages 2 $3.00 Adhesive Bandages 2 $3.00 
Subtotal: $8.00 Subtotal: $8.00 
Tax: $0.00 Tax: $0.00 
Shipping: $5.00 Shipping: $5.00 
Total $13.00 Total $13.00 


4-4 使 用 Myriad Pro (Æ) #1 Courier New (Æ) HY E-mail 发 要 
4.3 字体 限制 及 应 对 方法 


Arial 和 Times New Roman 之 类 的 标准 字体 遍地 都 是 ， 所 以 很 多 设计 师 都 喜欢 在 网 页 上 运用 
独特 的 字体 。 然而 Web 上 的 最 大 问题 是 , 并 不 是 所 有 的 电脑 都 支持 所 有 的 字体 。Adobe Illustrator、 
Photoshop， 其 至 微软 的 Word 软件 都 拥有 大 量 的 字体 ; 你 大 可 以 在 设计 网 页 的 时 候 随 意 使 用 这 些 
字体 ， 但 是 ， 很 可 能 用 户 的 电脑 上 根本 就 没有 安装 这 种 字体 。 


4.3.1 网 页 安全 字体 











实际 情况 是 ， 真 正 的 网 页 安全 字体 根本 就 不 存在 。 人 微软 列 出 过 5 种 “微软 网 页 安全 字体 ， 
这 几 种 字体 在 大 部 分 电脑 上 都 可 以 正 贡 显示 《参见 图 4-3)。 如 采 你 只 用 这 几 种 字体 ， 可 以 在 很 大 
程度 上 和 擎 担 内 容 的 样式 。 即 便 是 这 样 ， 你 也 无 法 保证 所 有 的 用 户 看 到 的 内 容 都 是 一 样 的 。 


Arial 

Courier New 
Georgia 

Times New Roman 
Verdana 


4-5 网 页 安全 字体 
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这 5 种 字体 不 是 特别 难看 ,但 是 它们 并 非 原创 ， 用 多 了 也 会 无 聊 。 事 实 上 ， 它 们 已 经 被 小 
了 。 很 多 网 页 都 把 Verdana 和 Arial 当成 标准 字体 ， 因 为 几乎 所 有 的 地 方 都 有 安装 这 两 种 字体 。 


最 后 ,我 们 大 概 只 能 有 这 样 的 保证 : 每 个 系统 上 肯定 都 会 有 一 种 宰 线 字体 、 一 种 无 讨 线 字体 
和 一 种 等 宽 字 体 ， 而 系统 自己 会 为 每 种 字体 选 一 个 默认 的 样式 。 兄 一 方面 ,我 们 还 有 一 些 技 马 可 
以 突破 这 些 限 制 ， 让 目 己 能 够 控制 的 东西 更 多 一 些 。 


4.3.2 图片 替换 


设计 师 时 第 会 把 要 显示 成 菜 种 字体 的 一 段 文 字 做 成 图 片 ， 通 第 在 制作 公司 Logo BET) 
刷 标 题 的 时 候 会 这 样 做 。 大 多数 设 计 师 会 在 Photoshop 或 者 Illustrator 里 做 出 样式 , 你 也 会 碰 到 这 
种 情况 的 。 


在 标题 中 使 用 图 片 化 的 字体 不 是 个 坏 主 意 , 但 要 注意 不 要 滥用 这 个 技巧 , 即便 这 个 技巧 能 保 
证 字体 在 每 个 浏览 如 中 看 到 的 都 一 样 。 因 为 将 PS 中 的 演示 文件 切割 (slice) 成 网 页 的 过 程 会 带 
来 很 多 其 他 的 问题 。 其 中 一 个 问题 是 页 面 下载 的 过 程 将 耗费 很 长 的 时 间 一 一 因为 图 片 都 很 大 。 更 
重要 的 是 ， 你 的 页 面 将 无 法 被 冒 人 使 用 ， 因 为 官 人 依靠 的 是 将 文字 转换 为 语音 的 屏幕 阅读 程序 ， 
而 阅读 程序 是 没有 办 法 读 出 图 片上 的 文字 的 “。 我 在 16.1 市 讨论 了 更 多 这 方面 的 内 容 。 


设计 Foodbox 的 时 候 ， 我 们 会 用 一 种 叫做 遮盖 的 方法 来 解决 这 个 问题 。 利 用 CSS， 我 们 可 
以 用 图 片 将 大 段 的 文字 遮盖 住 ， 这 样 既 可 以 保证 在 不 同 平台 上 的 显示 效果 一 致 ， 又 兼顾 了 可 访 
问 性 。 


4.3.3 用 字体 枝 来 定义 备用 字体 


还 有 一 种 方法 可 以 让 你 能 够 把 握 用 户 最 终 看 到 的 字体 样式 : 先 列 出 你 希望 用 到 的 特殊 字体 ， 
跟 在 它 后 面 的 古 用 来 禁 换 的 备用 字体 。 如 果 用 户 的 电脑 上 没有 安装 你 最 想 让 用 户 看 到 的 字体 ,还 
有 备用 字体 以 防 万 一 。 最 常用 的 定义 字体 的 CSS 代码 如 下 : 


body{ 
font-family: Helvetica 


上 面 的 一 小 段 代 码 定 义 了 一 种 叫做 Helvetica 的 无 衬 线 字 体 , æ MacOSX LAVA ULE, Fy 
EEK Windows 系统 上 并 没有 默认 安装 这 种 字体 。 于 是 ， 在 Windows LAs bias 2 Emap 





中 Photoshop 中 的 切割 功能 能 把 图 片 变 成 html 代码 ， 又 称 “ 切 片 ”。 译 者 注 
© 虽然 alt 属性 可 以 部 分 解决 这 个 问题 , 但 是 面 对 大 片 的 文字 ，alt 还 是 无 能 为 力 ， 所 以 我 们 不 建议 用 图 片 代替 大 
FIXE. 
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段 代 码 后 , 就 会 尝试 着 去 找 这 个 并 不 存在 的 字体 , 结 末 没有 找到 , 它 会 使 用 默认 字体 (Times New 
Roman) 来 代 茶 ， 而 这 是 一 种 宰 线 字体 。 


两 者 之 间 的 差异 是 巨大 的 , 除了 有 无 讨 线 这 一 上 扩 之 外 ,这 两 个 字体 在 相同 字号 下 的 大 小 也 古 
不 一 样 的 ，Helvetica 字体 的 宽度 和 高 度 都 略微 的 大 一 点 。 为 了 解决 这 个 问题 ,你 可 以 定义 一 种 备 
用 字体 ， 当 辛 贤 如 没有 找到 首选 字体 的 时 候 ， 还 可 以 采用 备用 字体 。 男 外 ， 你 还 可 以 定义 多 种 备 
用 字体 ， 因 此 常常 可 以 看 到 这 样 的 样式 定义 : 

body{ 


font-family: Helvetica, Arial, sans-serif 


} 

这 一 段 字 体会 告诉 训 览 右 先 找 找 Helvetica， 如 琳 没 有 就 试 试 Arial, BRIA, HAA 
默认 的 无 付 线 字体 。 这 并 不 是 完美 的 解决 方案 ,但 是 大 多 数 情况 下 效 末 都 还 行 。 很 多 人 把 这 种 方 
ERME FIER -o 


4.3.4 选择 备用 字体 


单单 知道 如 何 使 用 字体 栈 是 不 够 的 , 更 重要 的 是 学 会 组 织 字 体 栈 中 的 结构 。 备 用 字体 要 和 首 
选 字体 很 接近 ,例如 Arial 和 Verdana 都 是 无 桂 线 字体 ,但 是 Verdana 有 点 太 宽 了 ,比较 而 言 Geneva 
就 更 适合 做 Arial 的 备用 字体 。 


在 准备 字体 栈 的 时 候 , 记得 有 个 从 特殊 到 一 般 的 过 度 ， 先 选择 你 的 首选 字体 ， 再 找 一 种 让 你 
看 着 舒服 且 跟 首选 字体 相近 的 字体 ， 注 意 两 种 字体 的 高 度 、 宽 度 、Xx 高 度 、 癌 下 和 问 上 超过 基准 
线 的 高 度 都 差不多 ， 这 样 才 能 保证 在 蔡 换 的 时 候 ， 版 式 不 会 受到 太 大 有 影响。 然后 再 挑 一 种 你 喜欢 
的 网 页 安全 字体 ， 注 意 宽度 要 跟 上 和 面 两 种 差不多 。 最 后 要 用 CSS 指明 一 种 浏览 合 可 以 提供 默认 
的 字体 类 (font-family)， 具 体 的 值 有 : serif, sans-serif, monospaced, cursive FH fatansy, WI YE zF 
会 根据 这 些 值 提 供 默 认 的 字体 效果 ，CSS 代码 如 下 : 


p{font-family: Trebuchet, Lucida Sans, Arial, sans-serif;} 
h1{font-fami ly: Verdana, Geneva, sans-serif; } 
h2{font-family: Baskerville, Times New Roman, Times, serif } 


Unit Interactive 上 有 一 篇 很 好 的 关于 字体 栈 的 博文 ” ， 还 提供 了 一 些 不 错 的 例子 。 
44 挑选 字体 


如 东 想 为 页 面 挑选 一 种 有 效 的 字体 ， 先 得 芳 虑 一 下 页 面 的 内 容 。 网 页 上 会 有 来 谱 ， 所 以 要 傈 




















© http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ , 


48 > 第 4 章 字体 和 排版 

证 我 们 的 字体 容易 阅读 ,不 会 让 用 户 觉 得 困惑 。 同 时 ,如果 整个 网 页 都 用 一 种 字体 ， 那 看 起 来 也 
ZARRA, 所 以 在 导航 菜单 、 小 市 、 页 面 标题 以 及 另外 的 区 域 中 , 我 们 可 能 会 选用 不 同 的 字体 。 
当然 , 我 们 也 不 希望 页 面 成 了 一 个 字体 展示 板 , 因此 最 好 的 方法 可 能 是 把 每 一 页 的 字体 上 限 控制 
在 两 个 ， 当 然 ，Logo 的 字体 不 包括 在 内 。 我 们 会 给 网 页 的 主体 内 容 用 一 种 字体 ， 标 题 用 另 一 种 
字体 。 


4.4.1 页 面 内 容 字 体 

大 多 数 设 计 师 都 认为 无 衬 线 字体 更 适合 内 容 展示 。 虽 然 有 个 别 字 母 有 点 难以 辨认 , 但 是 完整 
的 单词 在 大 多 数 显示 器 上 都 能 被 完美 显示 。 

很 多 网 页 选用 Arial 字体 ， 用 Helvetica 做 备用 字体 。 也 有 些 设 计 师 喜欢 用 Verdana， 这 种 字 
体 比 较 宽 ， 可 以 比 Arial 更 好 地 填充 空间 。 但 是 在 字号 很 小 的 地 方 要 避免 使 用 Verdana 一 一 在 字号 
小 于 10 像素 的 时 候 ， 它 会 变 得 难以 辨认 。” 

4.4.2 ”标题 字体 


作为 一 个 标题 ,你 希望 用 那 种 可 以 抓 住 人 眼球 的 字体 ， 通 闸 情 况 下 还 会 使 用 更 大 的 字号 。 有 
设计 师 习 惯用 内 容 字 体 的 粗 体 来 做 标题 , 也 有 人 喜欢 采用 一 种 完全 不 同 的 字体 。 后 者 可 以 让 内 容 
很 多 的 页 面 看 起 来 更 加 生动 。 


在 为 标题 选择 字体 的 时 候 一 定 要 小 心 , 要 确保 用 户 能 容易 地 辨认 它 。 优 雅 好 看 的 字体 不 难 找 ， 
(He BG EI Tah: 这 种 字体 是 不 是 能 够 帮助 用 户 简单 有 效 地 区 分 页 面 上 的 不 同 部 分 。 


正如 你 在 图 4-6 中 所 看 到 的 , 我 会 选用 Monotype Corsiva 字体 , 这 种 字体 很 适合 我 们 的 标题 。 
虽然 它 不 是 标准 字体 ,但 是 作为 标题 ， 我 们 可 以 用 把 文字 变 成 图 片 放 在 页 面 上 。 等 会 儿 我 会 详细 


说 明 方 法 。 
The quick brown fox 


图 4-6 Monotype Corsiva， 一 种 优雅 的 字体 ， 适 合 做 标题 

















© 千 万 ， 千 万 不 要 使 用 10 像素 以 下 的 字号 ， 不 管 你 用 的 什么 字体 。 没 有 任何 借口 去 使 用 那么 小 的 字 ， 读 这 种 字 简 
直 就 是 种 折磨 。 
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@font-face 


在 不 远 的 将 来 ， 你 就 可 以 用 @fontrface 来 为 页 面 链接 自 定义 学 体 了 。 只 是 这 个 特性 在 老 
上 昌 的 浏览 器 中 支持 得 不 是 很 好 。Firefox 3.5 fe Safari 4 支持 @font-face， 但 是 它们 之 前 的 版 本 
并 没有 提供 这 个 特性 。IE 倒是 从 第 6 版 就 支持 @font-face 了 ， 但 是 你 必须 用 IE A RAK 
权 保 护 的 字体 。” 
很 快 ， 你 就 可 以 这 样 定义 字体 了 : 
@font-face { 


font-family: "YourFont"; 
src: url(/fonts/yourfont.ttf) formatC"truetype") ; 


hl { font-family: "YourFont", sans-serif } 


这 个 方法 既 简 单 又 方便 ， 只 是 有 个 小 问题 :大 部 分 字体 (比如 ，photographs) 都 需要 购 
买 使 用 许可 ,才能 用 在 这 里 。 它 们 是 有 版 权 的 ,而 你 也 得 尊重 版 权 。 用 (@font-face 不 像 用 图 片 
或 者 Flash 一 一 你 在 真 刀 真 枪 地 传播 字体 ， 因 为 用 户 的 浏览 器 会 下 载 你 所 使 用 的 字体 。 

幸运 的 是 ， 类 似 于 Typekit 的 服务 正在 和 字体 作者 还 有 发 行商 合作 ， 试 图 解决 这 个 授权 
问题 。 像 Typekit 自己 有 字体 服务 器 来 提供 字体 下 载 ， 开 发 者 只 需要 在 页 面 上 加 载 一 小 段 
JavaScript 记录 Typekit 账号 就 好 了 ,所 以 ,虽然 现在 就 开始 强 推 这 个 技术 似乎 显得 有 些 和 急躁 ， 
但 一 定 要 关注 它 ， 毕 竟 @font-face 大 大 简化 了 一 些 过 程 。 





4.5 ”使 用 基线 网 格 


为 了 将 内 容 有 效 地 传达 给 读者 ， 文 本 的 “流动 性 ”是 必 不 可 少 的 。 文 字 应 该 分 布 在 图 片 和 其 
他 元 素 的 四 周 ， 文字 栏 应 该 排 成 一 行 ， 并 且 栏 中 的 每 一 行 的 换行 位 置 不 能 让 人 觉得 奇怪 。 大 多 数 
网 络 开 发 新 手 都 会 用 训 贤 右 的 默认 设置 来 安排 文字 六 (text flow), {HERR RHE TED) FZ AIEEE 
时 间 和 弄 明 白 这 些 概 念 ， 设 计 出 来 的 东西 会 显得 更 整洁 。 

基线 网 格 是 一 种 纵向 排列 的 网 格 , 也 就 古 一 些 纵 向 排列 的 横 线 , 这 些 横 线 支 撑 着 文本 中 有 的 文字 。 
横 线 之 间 的 距离 可 以 作为 基本 计量 单位 (units of measure) ， 横 线 本 里 则 征 所 选 字体 的 基准 线 。 

基线 网 格 中 的 横 线 的 作用 束 像 是 纸 质 笔记 本 里 的 横 格 子 , 用 来 约束 文字 , 使 页 面 上 每 行 的 间 
隅 均匀 分 布 。 为 了 让 文字 能 够 流动 分 布 在 文字 栏 和 图 片 周围 , 需要 把 图 片 或 者 其 他 东西 部 跟 基准 
线 对 齐 , 图 片 的 高 度 应 该 是 网 格 中 两 条 基 维 线 之 间距 离 的 整 倍数 。 当 所 有 东西 部 同 基准 线 保 持 对 


























© 实际 上 Safari 从 3.1 就 开始 支持 @font-face 了 , 而 有 消息 称 全 4 就 已 经 支持 它 了 , 详 见 http://www.evotech.net/blog/2010/ 
01/font-face-browser-support-tutorial/。 一 一 译 者 注 
@ http://typekit.com, 
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齐 之 后 ， 文 字 栏 中 的 文字 将 目 动 分 布 在 图 片 周 围 ， 并 且 间 距 均 匀 。 最 终 ， 页 面 上 的 东西 阅读 起 来 


将 会 相当 轻松 。 


对 比 图 4-7 和 图 4-8， 你 能 感受 到 在 用 了 基线 网 格 之 后 ， 图 4-8 中 的 布局 变 得 多 么 优雅 。 


Welcome 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, 

consectetur adipisicing elit, sed do 

eiusmod tempor incididunt ut 

labore et dolore magna aliqua. Ut 

enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum. 


å-7 
Welcome 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, 

consectetur adipisicing elit, 

sed do eiusmod tempor 

incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum. 


News 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ciusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


Events 
Once upon a time there was a small town. 


Lorem ipsum dolor sit amet, consectetur adipisicing clit, sed do ciusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


在 没有 横 间 隔 的 时 候 ， 两 栏 的 文字 并 疫 有 对 章 


News 


Lorem ipsum dolor sit amet, consectetur adipisicing clit, sed do ciusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore cu 
fugiat nulla pariatur. Excepteur sint occaccat cupidatat non proident, sunt in culpa 


qui officia deserunt mollit anim id est laborum. 


Events 


Once upon a time there was a small town. 


Lorem ipsum dolor sit amet, consectetur adipisicing clit, sed do ciusmod tempor 
incididunt ut labore ct dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaccat cupidatat non proident, sunt in culpa 


qui officia deserunt mollit anim id est laborum. 


4-8 用 基线 网 格 可 以 让 两 栏 中 的 文字 行 对 齐 


4.5.1 行距 


行 中 (leading) 指 的 是 个 两 条 基准 线 之 间 的 距离 ， 通 常 也 称 作 line spacing， 在 CCS 中 这 个 


属性 叫做 line-height。 行 与 行 之 间 的 空白 方便 人 眼 六 贤 每 行文 字 ， 


同时 它 也 古 建 立 网 格 的 关键 。 


MRE TITE, 那么 行 与 行 之 间 的 空白 距离 也 就 随 之 确定 了 。 页 面 上 的 所 有 东西 应 该 古 这 个 距 
离 的 整 倍数 ， 这 样 才 能 保证 这 些 元 素 都 分 布 在 基准 线 上 。 


4.5.2 计量 单位 


网 格 是 基于 文字 行 高 的 一 一 就 是 两 条 基准 线 之 间 的 距离 。 如 末 行 高 定 18 像素 ， 那 么 文字 就 
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得 和 基准 线 距离 为 18 像素 的 网 格 对 齐 。 


我 们 用 像素 (pixel) 来 定义 基线 网 格 中 的 基础 字体 大 小 ,这 意味 着 我 们 使 用 的 是 绝对 值 测量 
法 。 有 些 网 络 开发 者 觉得 如 果 用 了 像素 作为 单位 ， 用 户 将 无 法 自己 调整 文字 大 小 。 其 实 这 种 说 法 
不 完全 正确 : 老 版 本 的 浏览 右 确 实 不 支持 缩放 像素 单位 的 字体 , 但 是 大 多 数 现代 训 览 吾 都 支持 这 
BOA 了， 其 至 还 能 缩放 行 高 。 


当然 ,我 们 可 以 花 些 时 间 来 挑选 合适 的 字体 ， 并 根据 这 些 字体 来 计算 出 行 高 、 间 距 和 其 他 的 
东西 一 一 然后 面 对 不 同 的 六 贤 带 的 时 候 我 们 会 发 现 目 己 做 的 古 无 用 功 , 因 不 同 的 剂 览 各 处 理 这 些 
东西 的 方法 是 不 一 样 的 。 一些 简 单 的 搜索 可 以 让 你 找到 一 些 方法 来 把 字号 做 成 相对 大 小 , 但 即便 
你 找到 了 看 似 完美 的 方法 , 页 面 上 图 片 的 宽 和 高 还 古 用 像素 来 衡量 的 , 于 是 你 又 不 得 不 去 找 容 门 
来 对 图 像 做 相应 的 缩放 。 

相对 字体 曾 被 看 做 古 提 高 有 视觉 障碍 用 户 的 可 访问 性 的 救星 , 因为 用 户 可 以 在 训 览 性 中 增加 
字体 大 小 。 但 息 这 桩 做 往往 让 事情 变 得 更 糟糕 ， 因 为 图 斤 不 会 随 着 文字 而 变 大 变 小 ， 后 有 末 束 息 文 
字 流 变 得 很 奇怪 ， 可 读 性 降低 。 季 好 ， 现 在 我 们 有 更 好 的 解决 方法 。 

不 省 原作 者 用 的 是 什么 计量 单位 来 划 定 的 字体 ， 人 微软 公司 的 Word 程序 和 Adobe 公司 的 
Acrobat 程序 都 允许 用 户 在 自由 缩放 的 同时 保留 原 有 的 布局 样式 。 这 种 方式 已 经 被 主流 训 览 合 所 
支持 。 在 16.2 市 ， 我 会 更 加 详细 地 谈 到 网 页 的 可 访问 性 和 为 有 视力 障碍 的 用 户 调 整 网 页 。 





























\// 小 乔 爱 问 …… 
U ”我 看 的 所 有 书 都 说 要 给 用 户 缩放 字体 的 自由 ， 你 现在 说 的 话 是 好 建议 吗 


在 第 1 章 ,， 我 曾 提 到 我 是 先天 性 白内障 患者 ,视力 非常 差 。 我 跟 网 络 上 的 “小 字体 ” 们 
打 过 好 长 一 段 时 间 的 交道 了 ， 有 不 少 好 心 的 开发 者 从 所 谓 的 “可 访问 性 专家 ”那里 得 到 了 号 
称 “ 最 好 ”的 解决 方案 ， 便 如 获 至 宝 。 可 异 他 们 总 是 忘记 测试 这 些 方案 ， 这 种 网 页 我 也 用 过 
不 少 , 实际 上 ,视力 差 的 用 户 会 用 类 似 ZoomText 这 种 全 屏 缩 放 的 辅助 设备 或 者 是 Windows 7, 
MacOSX 自 带 的 类 似 的 东西 。 妆 用 户 读 Word 文档 的 时 候 , 他 们 不 会 去 调整 文档 的 字体 大 小 ， 
而 是 用 Word 的 缩放 工具 。 用 户 用 浏览 器 的 时 候 也 会 这 样 做 。 而 有 全， 所 有 的 主流 浏览 器 都 支 
持 全 页 面 缩放 了 。 

回 到 2001 年 ， 开 发 者 为 了 低 视 力 的 用 户 而 饱 受 折磨 地 调整 页 面 似乎 还 情 有 可 原 。 现 如 
今 ， 浏 览 器 已 经 跟 上 步伐 ， 再 为 了 图 片 能 够 随 文 字 编 放 而 去 钻研 CSS 和 JavaScript, WA 
做 无 用 功 的 感觉 了 。 
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首先 ， 需 要 一 个 基准 字体 大 小 ， 这 样 才能 开始 建立 网 格 。 我 们 会 使 用 12 像素 作为 主体 文字 
的 字号 。 这 个 字号 大 小 适中 ， 在 一 般 的 显示 器 上 读 起 来 也 不 费劲 。 同时 ， 还 要 给 文字 的 上 下 都 
留 下 一 定 的 空间 ， 避 免 文字 纠缠 在 一 起 而 影响 陪读 体验 。 当 然 ， 空 白 留 的 太 多 也 不 好 。 同 时 ， 还 
要 注意 行 高 可 以 被 整除 。 所 以 我 们 就 用 18 像素 的 行 高 吧 ， 这 个 高 度 能 够 在 文字 上 下 留 出 合适 的 
缓冲 区 。 高 手 的 诀 穷 是 将 基准 字体 的 大 小 乘 以 1.25 或 1.5 得 到 的 值 作为 行 高 。12 像素 的 字体 就 用 
18 像素 的 行 高 ， 可 以 用 12/18 来 表示 。 这 种 表达 经 第 被 印刷 工人 用 来 表达 字号 和 行 高 。 


现在 , 我 们 确定 了 12 像素 的 主体 文字 字号 和 18 像素 的 行 高 , 为 了 保证 网 格 发 挥 正 第 的 作用 ， 
页 面 上 的 任何 元 素 都 要 采用 18 像素 的 高 度 。 这 意味 着 页 面 项 部 或 底部 的 留 日 需要 是 18 像素 的 倍 
Bl (或 者 加 起 来 是 18 像素 ， 比 如 9 像素 和 9 像素 )。 当 你 需要 为 页 面 增加 纵 同 空间 的 时 候 ， 确 保 
‘Eze 18 的 倍数 ， 这 样 才能 保证 页 面 上 的 元 素 都 能 和 网 格 对 齐 。 同 样 ， 图 片 的 裁剪 也 需要 注意 图 
片 的 高 度 是 18 像素 的 倍数 ,或 者 用 CSS 的 内 间距 (padding) 来 调整 图 像 的 高 度 使 之 符合 这 个 标 
‘HE 

二 级 标题 的 字号 要 比 文字 主 体 的 大 ， 我 们 把 它 增 加 到 18 像素 ， 跟 网 格 的 高 度 相 同 。 这 样 看 
起 来 应 该 不 错 ， 但 是 要 记得 在 二 级 标题 下 面 插入 18 像素 的 间距 。 


而 对 于 大 标题 呢 ， 我 们 会 使 用 两 倍 于 基准 字 马 的 大 小 一 一 24 像素 。 这 比 网 格 中 的 行距 18 像 
素 要 大 ， 所 以 我 们 需要 把 大 标题 的 行距 扩大 到 36 像素 来 保证 页 面 元 素 的 对 齐 。 


在 考虑 页 面 元 素 摆 放 位 置 的 时 候 ， 我 们 会 回 过 头 来 再 继续 介绍 基线 网 格 系统 ,包括 留 白 、 边 
框 、 内 间 跑 、 图 片 高 度 等 在 内 的 元 素 都 要 章 守 网 格 对 齐 ， 人 否则 设计 就 会 变 得 “ 形 散 。 


下 面 征 关于 字体 的 一 个 小 结 : 


























区 域 字体 字号 行 高 

标题 MonotypeCorsiva 24 像 素 36 像 素 
侧 边 栏 标题 Monotype Corsiva 18 像 素 18 像 素 
二 级 标题 Arial 14 像 素 18 像 素 
主体 Arial 12 像 素 18 像 素 


你 也 可 以 随意 组 合 这 些 设置 来 试 一 试 , 不 要 亦 步 亦 趋 地 跟着 我 做 ， 要 有 创意 ! Beane ay Lt 
着 调整 字体 大 小 来 看 看 字号 对 页 面 样式 的 影响 。 








D 如 末 你 的 主要 用 户 大 多 使 用 24 寸 iMac 和 极 高 的 分 辨 率 ， 这 个 字体 显然 太 小 了 。 当 然 ， 遇 到 这 种 情况 ， 话 题 又 会 
回 到 “了 人 解 你 的 用 户 ”。 
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排版 在 网 页 设计 中 是 个 重要 的 环 三 。 如 果 没 有 考虑 到 字体 的 使 用 对 阅读 的 有 影响， 那 设计 出 来 
的 页 面 很 可 能 让 用 户 难以 从 页 面 内容 中 抓 住 信息 。 定义 一 个 网 格 系统 来 标准 化 布局 可 以 提高 可 读 
性 ， 也 会 让 页 面 更 加 美观 。 

选 好 字号 和 样式 之 后 ,我 们 可 以 往 前 再 进一步 ， 来 做 数字 版 本 的 样式 页 了。 下 面 一 个 任务 是 
为 Foodbox 设计 Logo。 


第 二 部 分 _ 





图 像 设计 


本 ,部 ,分 ,内 , 容 


E 
J 
Un 


为 Foodbox 设计 Logo 
设计 样式 页 : 页 面 结构 
设计 样式 页 : 内 容 相关 
样式 页 上 的 按钮 
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第 》 章 
为 Foodbox 设计 Logo 


我 们 的 原始 设计 和 草图 包含 Foodbox 的 Logo, 你 时 第 会 磁 到 要 在 已 有 的 Logo 的 基础 上 修改 
或 者 再 设计 的 情况 , 客户 也 有 可 能 把 Logo 交 给 第 三 方 来 设计 , 你 则 需要 将 完成 的 Logo 融合 在 
HAE., W Foodbox 来 讲 ， 我 们 需要 根据 现 有 的 网 页 设计 来 完成 一 个 新 的 Logo， 因 为 上 一 版 
的 网 站 并 没有 提供 一 个 Logo, 也 没有 现成 的 数字 化 的 网 站 可 以 参考 。 你 可 以 参见 图 2-4 来 设计 
Logo。 





5.1 建立 工作 目录 


将 工程 组 织 得 有 条 有 理 ， 你 将 受益 无 穷 。 如 果 开 发 过 Ruby onRails， 你 会 明白 采用 标准 化 目 
录 结 构 所 带 来 的 好 处 。 虽 然 在 做 设计 的 时 候 没 有 这 种 类 似 的 标准 , 但 是 大 多 数 网 页 设计 师 都 有 各 
目的 办 法 来 组 织 记 杂工 作 轨 迹 。 在 目前 这 个 项 目 中 ,我们 也 会 采用 一 种 人 简单 的 目录 结构 来 维护 样 
式 和 图 像 文 件 。 

新 建 一 个 叫做 Foodbox 的 文件 夹 ， 在 其 中 再 建立 三 个 子 文件 夹 ， 分别 叫 做 images (图 片 )、 
stytlesheets (样式 表 ) 和 originals (原始 文件 )。” 

originals 文件 夹 会 用 来 放置 所 有 的 工程 文件 一 一 比如 Ilustrator 或 者 Photoshop 的 文档 ,以 及 


客户 给 你 的 所 有 图 像 。images 文件 夹 则 用 来 存放 网 页 需要 直接 使 用 的 所 有 图 像 。 而 stylesheets X 
件 夹 则 征用 来 存放 页 面 的 CSS 文件 的 。 





O 文件 夹 最 好 用 英文 名 以 防止 路 径 问 题 发 生 。 一 译 者 注 
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W 小 乔 爱 问 
J 我 必须 要 用 illustrator 吗 


也 不 是 ， 但 需要 指出 的 是 ， 如 果 想 要 从 事 设 计 相 关 的 工作 ，Illustrator 是 一 个 很 好 的 工 
具 ， 很 有 学 一 学 的 必要 。 所 以 学 会 使 用 Justrator 有 利 无 害 。Adobe 的 网 站 上 可 以 下 载 30 天 
的 试用 版 ， 足 够 你 掌握 这 一 章 的 内 容 了 。 如 果实 在 不 想 用 Illustrator，Inkspace” 也 是 个 不 错 
的 选择 。 本 章 内 容 是 基于 Ilustrator 的 ， 如 果 你 用 的 是 其 他 矢量 图 形 工具 ， 你 可 能 需要 把 这 
里 讲 的 操作 转化 为 该 工具 里 对 应 的 操作 。 





5.2 Foodbox 的 Logo 


用 矢量 图 形 来 设计 Logo 是 一 个 很 重要 的 原则 , 只 有 这 样 Logo 才 可 以 被 缩放 到 任何 合适 的 大 
小 ， 然 后 就 可 以 把 Logo 放 在 网 页 项 至 印刷 品 上 。 业 界 以 Adobellustrator 为 标准 ， 我 们 也 会 用 这 
个 软件 来 重 做 一 个 Foodbox 的 Logo, 


新 Logo 由 四 个 方形 和 文字 “foodbox” 组 成 。 完 成 作品 参见 图 $-1。 只 需要 简单 的 几 步 ， 你 
也 能 做 出 一 个 那样 的 Logo。 





5-1 完成 了 的 Foodbox 的 Logo 


© http://www.inkscape.org/ , 
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打开 Hlustrator， 新 建 一 个 文档 ， 文 档 大 小 随意 ， 因 为 将 Logo 导入 Photoshop 文档 上 时， 我 们 
会 进行 相应 的 缩放 工作 。 现 在 ， 只 是 用 Illustrator 做 个 Logo， 所 以 我 不 会 讲 得 大 详细 。 但 是 如 果 
你 准备 做 更 多 的 图 形 方面 的 工作 ， 我 建议 好 好 研究 一 下 Illustrator， 这 是 个 很 棒 的 工具 。 


先 从 四 个 方形 开始 吧 。 我 们 需要 四 个 圆 角 方形 排 成 两 排 ， 每 排 两 个 。 我 们 只 需要 很 少 的 步 又 
就 能 画 出 一 个 特定 大 小 的 方形 ， 然 后 用 Ilustrator 的 复制 功能 复制 出 剩 下 的 几 个 。 


(1) 在 工具 板 里 选择 Rounded Rectangle 工具 ( 圆 角 长 方形 工具 ) 一 一 按 住 Rectangle (长 方形 ) 
工具 不 放 ， 就 会 有 其 他 的 方形 绘制 工具 出 现 ， 其 中 就 有 Rounded Rectangle 工具 ， 选 中 它 。 

(2) 在 Options Toolbar (选项 工具 栏 ) 中 ， 将 填充 色 设 置 为 ##FCEE21， 边 框 色 设 为 黑色 。 

(3) 双击 画布 ， 会 出 现 一 个 对 话 框 ， 让 你 输入 方形 的 边 长 。 设 置 方形 的 长 和 宽 都 是 100pt ， 
角 的 弧度 是 12pt， 单 击 确认 ， 即 可 得 到 一 个 固定 大 小 的 方形 。 

(4) 然后 ， 双 击 工具 板 中 的 Selection (选择 ) 工具 ， 会 弹出 Move or Copy (移动 或 复制 ) 对 
话 框 。 

(5) 我 们 的 目的 是 复制 这 个 方形 ， 并 且 让 复制 得 到 的 两 个 图 形 之 间 有 准确 相等 的 间隔 。 在 
horizontal (水 平 ) 一 栏 中 输入 110pt， 然 后 单 击 复制 按钮 。 这 个 操作 会 在 距离 刚刚 那个 方形 的 起 
始点 110pt 的 地 方 复制 一 个 方形 。 这 样 ， 两 个 方形 的 距离 就 是 10pt 了 。 











W 小 乔 爱 问 ida sina 
J $$) Logo 中 的 不 同 颜色 是 怎么 来 的 


我 用 到 了 调 色 板 中 的 不 同 颜色 ,调整 了 方形 的 色调 ,让 它们 看 起 来 更 好 看 ， 同 时 我 还 打 
印 了 几 份 出 来 ， 为 了 确保 打印 出 来 的 和 屏幕 上 的 看 起 来 差不多 。 





(6) 用 相同 的 方法 复制 出 剩 下 的 两 个 方形 ， 只 不 过 这 次 会 用 到 垂直 距离 而 不 是 水 平 距离 。 用 
选择 工具 选中 刚刚 得 到 的 两 个 正方 形 ， 然 后 双击 工具 板 上 的 Selection 工具 打开 Move or Copy 对 
话 框 。 在 垂直 距离 那 一 栏 中 填 入 110， 水 平 距离 设 为 0， 单 击 复制 按钮 ， 现 在 你 得 到 了 平均 分 布 
的 四 个 正方 形 。 

接 下 来 ， 要 为 这 四 个 方形 上 色 了 。 

(1) 按 下 F6 打开 调 色 板 (Color palette) 。 

(2) 用 Direct Selection 工具 直接 选择 工具 选择 一 个 方形 ， 双 击 调 色 板 中 的 填充 色 方 块 。 


O pt Æ Illustrator 中 的 一 个 单位 缩写 ， 代 表 的 是 “点 ”(point) 。 一 -一 译 者 广 
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(3) 从 左上 开始 ， 按 照 逆 时 针 顺 序 分 别 给 四 个 方形 上 色 : 黄 (#FCEE21), $k (#C2EE21), 
{$ (#FCBA21) 和 米黄 (#FCEEBS) , 


现在 是 时 候 往 里 添加 文字 了 。 为 了 让 Logo 看 起 来 平衡 一 些 ， 需 保证 “foodbox” 几 个 字 的 高 
度 和 两 个 方形 的 高 度 相 同 。 为 了 达到 这 个 目的 ， 需 要 用 到 定位 辅助 (guide), 


大 多 数 的 绘制 工具 都 提供 了 定位 辅助 的 功能 ， 用 来 帮助 对 齐 对 象 , 或 者 帮 你 将 绘制 的 图 形 安 
置 在 它 应 该 在 的 位 置 。 对 于 那些 有 过 议 计 工作 经 难 的 人 来 说 ， 定 位 辅助 的 概念 并 不 会 显得 陌生 。 
我 们 将 会 使 用 这 个 功能 来 定位 文字 ， 方 便 又 简单 。 

(1) MERKRA eb, FER Crtl+R。 

(2) FAT hii — THR. TERRIA TACEHIRAR, Flirt LA, Fz 
住 忌 标 并 癌 下 拖 动 鼠 标 ， 束 可 以 得 到 一 根 辅助 线 ， 将 辅助 线 放 置 到 方形 的 上 治 ， 放 开 鼠 慰 ， 这 样 
上 党 的 辅助 线束 设置 好 了 了 。 

(3) 如 法 炮制 ， 得 到 方形 下 沿 的 辅助 线 ， 这 样 就 可 以 根据 辅助 线 来 加 入 文字 了 。 

现在 ， 你 应 该 看 到 图 5-2 中 的 两 条 辅助 线 了 。 




















5-2 ”缩放 文字 


然后 开始 添加 文字 。 


口 选用 Text (文字 ) THA. 

O 在 文字 选项 板 中 设 定 字体 为 Arial Black， 字 号 为 72pt。 

D 在 画布 上 输入 “foodbox ， 随 便 把 字 放 在 那里 都 可 以 ， 我 们 一 会 儿 再 移动 它们 的 。 

O 接着 单 击 选 择 工 具 ， 输 入 的 字 的 周围 会 出 现 供 你 调整 大 小 的 手柄 。 按 住 Shift 键 的 同时 拉 
动 右上 角 的 调整 手柄 ， 让 《的 上 端 接触 到 靠 上 的 那个 辅助 线 ， 同 时 也 要 保证 下 的 下 端 接触 
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到 靠 下 的 那 根 辅助 线 。 如 末 效 琳 不 理想 ， 多 试 儿 次 缩放 和 移动 直到 满意 为 止 。 如 来 其 他 
的 字母 超过 了 靠 下 的 辅助 线 ， 不 要 担心 ,我们 马上 就 会 处 理 。 


创建 字符 轮廓 


设计 师 经 常用 Justrator 中 的 创建 轮 廊 (Create Outlines) 来 调整 应 用 在 文字 上 的 字体 。 
但 是 这 个 功能 还 有 其 他 的 好 处 。 

我 接 到 一 个 客户 的 时 候 ， 会 问 他 有 没有 现成 的 Logo。 如 果 有 ， 我 会 设法 要 来 一 份 
Illustrator 或 者 EPS 格式 的 文档 , 这 样 我 就 能 调整 Logo 让 它 可 以 适当 地 放 在 网 页 上 了 ,偶尔 ， 
我 拿 到 的 Logo 中 含有 特定 的 字体 ， 我 不 得 不 去 寻找 免费 版 本 或 者 花 不 少 钱 去 买 一 份 授权 (这 
种 情况 更 常见 ) 。 

有 种 折 中 方案 是 找到 Logo 设计 师 做 一 份 Logo 的 副本 , 拿 到 副本 后 我 会 用 创建 轮廓 工具 
来 得 到 图 案 中 文学 的 轮 慷 ,然后 利用 这 些 轮廓 玉 设 计 。 这样 既 保 留 了 学 体 的 样式 ,又 兼顾 了 
跨 操作 系统 和 跨 平 台 性 。 


仔细 观察 ， 会 发 现 有 些 字 母 的 下 治 超 过 了 辅助 线 。 可 以 微调 字体 来 解决 这 个 问题 。 


(1) 用 Select 工具 选择 字 图 图 层 。 

(2) Select Text>Create Outlines。 这 个 命令 将 文字 转化 成 矢量 图 形 。 现 在 不 能 改动 文字 内 容 了 ， 
但 是 可 以 用 任何 绘图 或 者 操作 工具 来 调整 文字 的 形状 。 

(3) 用 工具 板 中 的 Direct Select 工具 ， 框 选 字母 o 的 下 半 部 分 ， 按 几 次 同上 按钮 ， 直 到 o 的 下 
沿 接触 到 辅助 线 。 

(4) 对 其 他 超过 辅助 线 的 字母 重复 上 面 那个 步骤 。 


最 后 ， 单 击 选择 工具 ， 按 下 Ctrl+ A 来 选择 所 有 对 象 。 按 住 Shf 键 的 同时 调整 Logo 的 大 小 
能 够 放置 在 画布 的 边界 框 之 内 一 一 就 是 那个 画布 上 用 黑色 边线 框 住 的 长 方形 中 。 


将 这 个 文档 保存 成 名 为 foodbox Logo.ai 的 文件 ， 放 置 在 项 目的 originals 文件 夹 中 。 稍 后 我 
们 会 将 这 个 文件 导入 到 Photoshop 中 ， 所 以 当 你 保存 文件 的 时 候 ， 记 住 要 勾 选 PDF FRA EI, R 
则 Photoshop 无 法 导入 这 个 文件 。 


记 住 我 们 用 的 是 矢量 绘制 工具 ， 所 以 从 咖啡 杯 到 大 广告 牌 ， 我 们 都 可 以 用 这 个 文件 。Logo 
可 以 被 无 损 地 任意 放大 或 者 缩小 。 


53 ” 当 我 们 需要 自己 设计 Logo 的 时 候 怎 么 办 
在 上 面 那个 例子 中 , 我 们 有 一 个 现成 的 参考 ， 所 以 我 们 其 实 是 在 学 习 Illustrator 的 基本 操作 ， 





ike 
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然后 对 原 有 的 东西 进行 再 创造 。 那 么 ， 要 为 你 的 产品 和 生意 从 头 开 始 设计 一 个 Logo 的 话 ， 还 需 
要 其 他 什么 东西 呢 ? 


想 想 现 如今 的 一 些 成 功 的 Logo 吧 。 全 世界 的 人 都 认得 可 口 可 乐 的 Logo， 耐 克 的 也 很 好 关 
认 。 但 是 ， 这 两 个 Logo 跟 它们 所 代表 的 产品 一 点 都 不 像 。 


其 实 ， 设 计 Logo 和 设计 网 页 的 方法 差不多 。 


相对 字句 ,人们 阅读 图 像 的 速度 要 快 得 多 ,设计 Logo 就 要 充分 利用 这 一 后, 让 人 一 看 到 Logo 
就 能 联想 到 公司 的 产品 。 比 如 说 可 口 可 乐 的 Logo"， 人 们 往往 不 用 阅读 其 中 的 文字 ， 就 能 将 这 个 
Logo 和 它 的 产品 联系 起 来 。 这 才 是 设计 Logo 的 最 根本 目的 一 一 你 的 Logo 只 代表 你 和 你 的 公司 。 


人 们 对 Logo 的 快速 辨认 基于 公司 对 Logo 的 长 期 和 稳定 的 使 用 。 如 末 你 时 第 更 换 Logo, A 
们 就 很 难 建立 起 你 所 需要 的 品牌 辨识 能 力 。Logo 束 代 表 了 了 你， 人们 会 牢 牢 记 住 它 ， 如 霖 Logo ix 
计 得 不 好 ， 它 也 藉 起 不 到 相应 的 作用 了 。 律 师 事务 所 的 Logo 与 水 上 乐园 的 Logo 一 定 古 坦 异 的 。 


如 采 你 设计 的 Logo 包含 了 文字 ， 那 么 一 定 要 让 文字 可 以 被 很 容易 地 阅读 。 记 得 使 用 清晰 易 
读 的 字体 ， 要 么 把 字体 弄 得 很 大 ， 要么 就 用 很 小 的 字号 。 配 色 方面 则 要 人 简单， 而 且 要 用 比较 保险 
的 颜色 。 回 忆 你 学 过 的 颜色 和 情绪 的 关系 ， 把 它 运 用 到 Logo 设计 中 。 

跟 网 页 不 同 的 是 ，Logo 很 可 能 被 打印 出 来 ， 所 以 要 用 打印 机 把 Logo 打 出 来 ,看 看 闫 色 是 否 
正确 。 当 进行 网 页 相关 的 制作 时 , 用 RGB 色彩 模式 , 但 是 如 采 你 设计 的 东西 会 被 印 出 来 , CMYK 
应 该 是 你 的 选择 。 基 于 CMYK 的 图 片 可 以 被 转 存 为 RGB 模式 用 在 网 页 上 ,但 征 逆 操作 则 非常 
难 ， 特 别 丰 颜色 匹配 方面 的 问题 更 令 人 头疼 。 


Boa, alls SER ARES Pine Logo, Pray LAFTEN—f AY Logo BARK. 
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像 Ilustrator 这 种 基于 矢量 的 图 像 很 适合 创作 可 缩放 、 多 功能 的 Logo。 下 次 你 要 设计 Logo 
的 时 候 ， 别 忘 了 用 上 这 章 所 学 到 的 技巧 ， 比 如 复制 和 字体 修改 等 。 更 别 忘 记 要 有 创意 ,你 可 以 随 
意 修 改 上 面 那 个 设计 好 的 Logo， 做 出 一 些 改变 ， 用 不 同 的 形状 、 字 体 、 字 号 或 者 布局 ， 甚 至 可 
以 根据 上 面 的 建议 设计 创造 一 个 轿 新 的 Foodbox 的 Logo, 


下 一 步 的 任务 是 ， 做 出 一 个 彩色 的 样式 页 。 





© 可 口 可 乐 的 Logo 是 Coca-Cola 这 几 个 字 组 成 的 。 一 一 译 者 往 


前 面 几 章 我 们 已 经 完成 了 设计 草图 和 配色 方案 ， 接 下 来 就 可 以 开始 使 用 Adobe Photoshop tl 
作 Foodbox 的 首页 样式 了 。 这 一 草 会 拟 出 页 面 的 结构 ， 并 且 把 页 头 (header) 和 页 脚 (footer) 做 
好 。 慢 慢 地 你 就 会 熟悉 Photoshop 当中 的 一 些 布局 选项 ， 这 些 选 项 可 以 帮助 你 在 之 前 定义 的 网 格 
中 对 章 页 面 中 的 各 种 元 素 。 


6.1 关于 图 层 


图 层 非常 强大 ， 除 此 之 外 我 想 不 出 还 有 什么 形容 词 可 以 用 来 接 述 它 的 作用 。 有 了 图 层 ， 你 可 
以 把 一 个 整体 的 作品 打 散 成 为 不 同 的 模块 ， 便 于 创作 和 管理 。 每 一 个 图 层 就 像 是 一 个 独立 的 文 
档 。 你 可 以 对 单独 的 图 层 进 行 粘 贴 、 复 制 、 选 择 、 删 除 ， 黄 至 在 图 层 上 应 用 各 种 效 末 。 同 时 ， 图 











屋 还 是 透明 的 ,这 意味 着 你 可 以 将 它们 登 加 起 来 形成 完整 的 作品 。 图 6-1 演示 了 样式 页 里 组 合 图 
层 的 方式 。 


WENNNENS 





6-1 图 层 组 合 
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很 多 时 候 ， 设 计 师 会 在 一 张 图 片上 新 加 一 个 图 层 ， 在 上 面 写 些 文字 。 在 这 种 情况 下 ， 文 字 不 

是 直接 写 在 图 片上 的 , 所 以 设计 师 可 以 随时 修改 它们 , 同时 保留 了 Photoshop 文档 中 图 片 的 原貌 。 
当 你 从 Illustrator 或 者 Photoshop 中 导出 JPEG, GIF, PNG 或 其 他 格式 的 图 片 时 ， 软 件 会 自动 
合并 图 层 。 但 是 如 果 你 把 原始 文档 弄 丢 了 或 者 删除 了 ， 那 就 不 得 不 从 头 开始 了 ， 文 档 中 的 图 层 是 
不 能 从 图 片 中 恢复 的 。 这 也 是 导致 很 多 Logo, 按钮 或 者 其 他 图 片 的 制作 总 是 需要 从 头 再 来 的 原因 。 


下 面 , 我 们 会 在 Illustrator 和 Photoshop 中 用 到 大 量 的 图 层 , 你 要 注意 的 古 随 时 保存 原始 工程 
文件 。 





W 小 乔 爱 问 ee 
J 39132 A Photoshop 吗 


不 一 定 ， 但 是 推荐 用 它 。 理 由 跟 我 在 第 5 章 的 “我 必须 要 用 Ilustrator 吗 ” 中 说 到 的 一 
样 。Photoshop 是 处 理 照 片 和 光栅 图 形 " 的 行业 标准 。 虽然 从 技术 上 讲 ， 用 其 他 便宜 一 点 或 者 
开源 软件 也 能 完成 我 们 的 任务 ， 但 是 在 本 书 里 我 还 是 以 Photoshop 为 例 。 

当然 ， 你 也 没 必 要 现在 就 冲 到 商店 里 买 一 套 Adobe Creative Suite， 只 是 为 了 这 本 书 就 这 
么 干 不 太 值 。Adobe 提供 了 30 天 的 试用 版 ， 足够 让 你 学 会 书 中 的 例子 了 ， 然 后 你 可 以 决定 
是 不 是 真 地 需要 买 一 套 软 件 。 只 要 你 在 Photoshop 中 完成 了 这 些 练习 ， 你 会 发 现在 别 的 软件 
中 的 操作 也 是 类 似 的 。 

当然 ， 你 也 不 必 非 得 用 最 新 版 本 的 Photoshop 。 书 里 的 例子 应 该 可 以 在 任何 版 本 的 
Photoshop 中 完成 。 


如 果 你 还 是 坚持 已 见 ， 那 我 向 你 推荐 GIMP2 或 是 它 的 修改 版 Gimp-Shop”。 这 个 修改 版 
做 过 优化 ， 看 起 来 更 像 Photoshop 一 些 。 你 可 以 用 这 些 软 件 完 成 本 书 的 例子 。 


6.2 基本 结构 


最 开始 ,我 们 需要 把 主页 的 设计 草图 变 成 由 长 方形 组 成 的 一 个 个 区 域 : 页 头 、 页 脚 以 及 两 个 
内 容 栏 ， 把 这些 区 域 规整 成 长 方形 (参见 图 6-2)。 这 一 步 的 关键 是 用 长 方形 的 思维 来 思考 页 面 结 
构 ， 实 际 上 ， 在 平时 看 网 站 的 过 程 中 ， 你 就 应 该 用 这 种 思维 来 寻找 页 面 上 的 长 方形 。 

D 点 阵 图 像 或 位 图 图 像 ， 由 像素 点 组 成 。 一 一 译 者 注 


© http://www.gimp.org/downloads, 
© http://www.gimpshop.com/download.shtml, 
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gets 


~ #FFF8E4 








图 6-2 ”用 颜色 标记 的 不 同 区 域 
6.2.1 屏幕 大 小 


制作 网 页 的 时 候 , 我 们 不 可 能 知道 用 户 会 使 用 多 大 的 屏幕 观看 网 页 。 最 好 的 方法 就 是 先 以 平 
均 屏 莫大 ore 目标 。 壁 如 说 在 写 这 本 书 的 时 候 , 网 页 用 户 的 屏幕 大 多 数 都 是 1024 像素 x 768 像素 
的 分 辨 率 ， 还 有 很 大 一 部 分 的 屏幕 分 辨 率 更 高 。” 


但 是 这 个 数据 可 能 会 有 一 些 误导 性 。 就 算 用 户 用 的 是 宽屏 的 显示 器 , 他 们 也 不 一 定 会 用 全 屏 
方式 来 使 用 浏览 器 ， 而 是 将 浏览 器 窗口 跟 别 的 程序 并 排放 在 屏幕 上 。 同 时 ， 人 们 还 会 用 手机 、 
PDA, iPod 甚至 任天堂 Wi 游戏 机 来 上 网 。 你 的 网 页 在 任何 大 小 的 屏幕 上 都 要 有 可 读 性 。 


在 Photoshop 中 新 建 一 个 名 叫 foodbox_mockup 的 文档 , 将 它 的 宽度 设 为 900 像素 , 高 度 设置 
为 756 RR, 分 辨 率 为 72dpi (点 /英寸 )。 色 彩 空 间 设置 为 RGB， 背景 色 是 白色 。 之 所 以 这 样 设 
E, 古 因 为 我 们 把 1024 像素 x 768 像素 的 分 辨 率 作 为 目标 屏 医 。 这 样 一 来 页 面 的 宽度 就 比 屏 医 的 
宽度 要 小 ， 用 户 不 用 深 动 横向 的 滚动 条 ,同时 页 面 的 两 边 还 会 有 一 定 的 留 白 。 我 们 将 会 制作 一 个 
eC UL 


新 建 好 文档 之 后 ， 将 文件 存在 originals 文件 夹 中 ， 文 件 名 设 定 为 foodbox_mockup.psd, 











D 根据 http://www.w3schools.com/browsers/browsers_display.asp 的 数据 显示 ， 写 这 本 书 的 时 候 ，$4% 的 用 户 的 显示 器 
分 辨 率 是 1024 像素 x 728 RR, DIA 26% 的 用 户 的 分 辨 率 要 大 于 这 个 值 。 
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6.2.2 ” 定 宽 布 局 


在 定 宽 的 布局 中 ,网 页 的 大 小 是 固定 的 ,不随 训 览 右 窗 口 大 小 的 改变 而 改变 。 这 种 布局 比 起 
可 伸缩 的 (或 者 叫 液 态 的 ) 布局 更 容易 设计 和 实现 。 液态 布局 需要 更 多 的 测试 和 代码 才能 保证 其 
EA Tal bi as PATHE. AA, 没有 对 该 态 布 局 的 代码 做 恰当 的 维护 ,页面 中 的 文字 
行 就 可 能 变 得 极 长 而 洪 出 页 面 , 或 者 是 太 短 而 不 能 充满 页 面 。 无论 上 述 哪 种 情况 发 生 ， 页 面 都 会 
变 得 极 难 阅 读 。 相 反 ， 实 现 一 个 静态 布局 则 不 需要 化 费 多 少时 间 。 

然而 , 不 同 的 页 面 需 要 不 同 的 布局 。 那 种 提供 大 量 信息 的 网 站 可 能 需要 流动 的 页 面 ; 展示 大 
量 数据 的 商用 网 页 程序 可 能 并 不 适合 定 宽 的 页 面 。 你 需要 根据 情况 量体裁衣 ， 定制 不 同 的 页 面 布 
局 ， 而 不 古 随 波 未 流 ， 也 不 要 在 每 个 设计 中 重复 使 用 单一 的 模板 。 











its 





APTS AMAR RT AERA WR ASR DR “A BR” ASH 意思 是 小 显示 器 
前 的 用 户 不 得 不 往 下 拉动 滚动 条 才能 看 到 完整 的 页 面 。“ 折 梧 ” 一 词 来 自 于 印刷 界 ， 指 的 是 
在 制作 报纸 的 时 候 , 会 尽量 在 第 一 版 的 上 半 部 分 塞 入 更 多 的 信息 , 这样 人 们 就 能 在 不 展开 折 
登 的 情况 下 阅读 到 更 多 的 内 容 。 然 而 ,这 个 理论 现在 不 再 适用 了 。 虽然 人 们 不 太 愿 意向 下 拖 
动 滚 动 条 , 但 是 大 家 都 已 经 习惯 了 。 所 以 只 要 你 设计 的 页 面 能 够 清楚 地 显示 出 有 向 下 拖 动 深 
动 条 的 必要 ， 用 户 们 通常 会 乐意 这 么 做 。 


6.2.3 ”设置 网 格 


在 4.5 市 里 讨论 排版 基础 的 时 候 , 我 们 曾经 深入 地 讨论 过 基于 网 格 的 工作 。 同 样 ,在 Photoshop 
中 也 可 以 把 网 格调 为 可 见 , 它 会 出 现在 画布 的 上 方 ,我 们 可 以 利用 这 个 网 格 来 排列 页 面 上 的 元 素 ， 
比如 文字 之 类 的 。 但 是 Photoshop 中 默认 的 网 格 设置 并 不 能 满足 我 们 的 需求 ， 所 以 需要 作 些 细微 
的 调整 。 

首先 ， 选 中 Edit (编辑 ) 菜单 下 的 Preference (首选 项 ) 栏 ， 在 Units and Rulers (单位 和 标 
RKR) 面板 里 把 标尺 的 单位 改 成 像素 (px). Za, Æ Guides, Slices and Count (辅助 线 、 切 片 和 计 
数 ) 面板 中 将 Guidlines Every (辅助 线 间 隔 ) 设 定 为 18 像素 ， 这 个 值 也 是 我 们 选 的 行 高 。 同 时 
将 辅助 线 的 颜色 调整 成 为 比较 刺眼 的 颜色 , RAPER ES, 或 者 是 某 种 你 在 设计 中 绝对 不 会 用 到 的 
颜色 。 这 样 ， 在 工作 的 时 候 辅 助 线 会 显得 更 加 突出 。 

在 Photoshop 默认 的 工作 界面 中 ， 网 格 和 标尺 并 不 是 开启 的 ， 按 下 Ctrl+R 键 可 以 唤起 标尺 ， 
Ctrl+" 则 是 网 格 的 快捷 键 。 
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6.2.4 用 辅助 线 划 定 区 域 


设计 Logo 的 时 候 , 你 学 会 了 如 何 用 辅助 线 对 齐 Logo 中 的 文字 和 四 个 方块 。 同 样 ， 你 会 发 现 
用 辅助 线 把 构图 分 成 几 个 不 同 的 部 分 是 很 有 用 的 ， 它 可 以 帮助 你 绘制 和 对 齐 页 面 中 的 元 素 。 


我 们 用 Rectangle Shape (和 矩形 绘制 ) 工具 ， 从 页 头 和 页 脚 开 始 ， 照 着 草图 画 出 页 面 上 的 不 同 
区 域 。 在 这 个 练习 里 ,你 需要 将 页 头 和 页 脚 做 成 同样 的 颜色 , 当然 , 别 忘 记 做 些 实验 性 质 的 组 合 。 


先 从 页 头 和 页 脚 开 始 。 首 先 ， 页 头 要 足够 高 ， 这 样 才 能 放 得 下 我 们 的 Logo; 但 是 页 脚 就 不 
用 ， 因 为 里 面 只 会 显示 有 版权 信息 和 使 用 条 牧 等 。 当 然 ,在 设 定 它们 的 高 度 的 时 候 要 记 住 乙 前 讲 过 
的 基准 线 网 格 一 一 我 们 定 的 网 格 高 是 18 像素 ,所 以 页 头 和 页 脚 的 高 度 应 该 是 18 的 倍数 。 试 试 把 
页 头 定 为 108 RR, TEDL 54 像素 。 

要 放置 页 头 的 辅助 线 ， 将 鼠标 指针 移 放 到 图 片上 方 水 平 的 标尺 上 , FREER ABE PH BLE 
108 像素 的 位 置 。 然 后 以 同样 的 方法 在 702 像素 位 置 的 页 脚 放 置 辅 助 线 。 

我 们 需要 足够 宽 的 侧 边栏 ， 用 于 显示 末 谱 搜索 表单 和 标签 去 。 所 以 把 侧 边 栏 设 置 为 306 像素 
宽 。 当 然 ， 之 后 还 可 以 调整 这 个 宽度 。 将 鼠标 指针 移 放 和 转 到 图 片 左 侧 竖 直 的 标尺 上 ， 按 住 鼠 标 不 
WHARE 306 像素 的 地 方 ， 松 开展 标 ， 放 下 基准 线 。 

现在 ， 我 们 已 经 用 基准 线 标 出 了 页 面 上 的 四 个 区 域 〈 参 见 图 6-3)。 然 后 用 第 形 工具 向 区 域 中 填充 
形状 。 注 意 ， 四 个 区 域 的 边界 线 部 落 在 了 之 前 我 们 讲 的 网 格 基 维 线 上 。 现 在 开始 打扮 这 个 页 面 吧 。 


stepi.psd @ 66.7% (Layout, RGB/8)* x 
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6.3 放置 Logo < 67 
6.2.5 BMA fal Kit 


接 下 来 的 工作 是 根据 辅助 线 画 出 不 同 的 区 域 。 按 下 U 键 选择 矩形 工具 ， 同 时 要 注意 勾 先 
Shape Layers (形状 图 形 ) 选项 。 


在 选项 面板 里 ， 选 中 调 色 板 ， 将 颜色 设置 为 FFE500。 单 击 OK fH. EERTE m — 758 
形 ， 和 覆盖 那 条 在 108 像素 位 置 的 辅助 线 上 方 的 区 域 : 现 将 鼠标 放 在 画布 的 左上 角 ， 按 住 忌 标 不 放 
并 拖 忠 至 辅助 线 和 画布 右边 框 的 交 后 。 


然后 古 页 脚 。 同 时 按 下 Shift+Ctrl+N 键 新 建 一 个 图 层 一 一 把 新 的 东西 放 在 一 个 新 的 图 层 上 古 
一 个 好 习惯 ， 这 样 改 动 起 来 也 会 比较 容易 。 创 建 图 层 的 时 候 Photoshop 会 要 求 你 给 图 层 命 名， 以 
便 日 后 查找 。 从 702 像素 位 置 的 辅助 线 开始 ， 画 出 页 脚 的 矩形 区 域 。 


下 面 就 轮 到 侧 边 栏 了 ， 为 它 新 建 一 个 图 层 ， 为 这 个 图 层 取 个 恰当 的 名 字 ， 将 颜色 设置 为 
FFD67F， 画 出 左边 的 侧 边 栏 ， 侧 边栏 应 该 恰好 在 辅助 线 框 起 来 的 区 域内 ， 从 (0, 108) 像素 的 
位 置 按 住 鼠 标 不 放 ， 拖 卡 到 (300, 720) 像素 的 位 置 。 


然后 将 剩 下 的 区 域 用 颜色 为 FFF7DF 的 形状 图 形 填 满 。 


现在 , 四 个 框架 区 域 都 定义 好 了 ，, 接 下 来 该 考虑 首页 上 其 他 元 素 的 摆 放 了 。 和 草图 中 ,Foodbox 
的 Logo 是 在 页 面 上 方 的 ， 而 且 Logo 我 们 也 已 经 做 好 了 。 保 存 一 下 文件 ， 继 续 完 成 后 面 的 工作 。 


6.3 ”放置 Logo 


Photoshop 在 网 页 制作 方面 很 实用 的 原因 之 一 证， 这 个 软件 与 其 他 软件 的 兼容 性 很 加。 我 们 
刚刚 在 Illustrator 中 画 好 了 一 个 Logo， 现 在 ， 可 以 将 那个 画 好 的 图 片 以 矢量 图 形 的 形式 导入 到 样 
式 页 中 。 然 后 可 以 对 Logo 进行 缩放 ， 将 之 放 在 合适 的 位 置 上 。 这 时 ， 辅 助 线 下 能 大 住 我 们 定位 
它 的 位 置 了 。 

先 确 定 标尺 和 网 格 都 古 开 启 的 ， 然 后 画 两 条 水 平 的 辅助 线 。 第 一 条 辅助 线 要 画 在 18 像素 的 
地 方 , 正好 和 网 格 中 的 第 一 条 水 平 线 重合 , 第 二 条 辅助 线 则 和 网 格 中 处 于 90 像素 的 水 平 线 重 合 。 
这 样 ，Logo 的 上 方 和 下 方 各 留 出 了 18 像素 的 至 陀 。 然 后 从 左边 的 标尺 中 拉 出 一 条 坚 直 的 水 平 
线 ， 停 在 18 像素 的 位 置 。 这 样 ， 我 们 就 确定 好 了 放置 Logo 的 准确 位 置 。 

单 击 File 菜单 下 的 Place 选项 ， 找 到 Logo 文件 ， 单 击 确认 。 将 Logo 拖 息 至 画面 的 左上 角 ， 
让 Logo 的 左上 和 角 跟 刚刚 画 的 那 两 条 辅助 线 的 交点 重合 。 然 后 用 缩放 手柄 来 调整 图 形 大 小 。 按 住 
Shift §#, fE Logo 布下 角 的 缩放 手柄 加 左上 方 拉动 ， 直 到 Logo 的 右 下 角 磁 到 处 于 90 像素 的 那 条 
辅助 线 。 按 下 Enter 键 放 管 文件 。 
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当 把 一 个 Hiustrator 文档 放置 在 Photoshop 文件 中 时 ， 这 个 文档 会 被 当 作 智 能 对 象 (Smart 
Object) 。 如 采 你 修改 并 保存 了 Illustrator 文档 ， 这 些 修改 会 自动 反映 到 Photoshop 文件 当中 (2 
VU 6-4) o 




















6-4 7E Photoshop 中 的 Logo 


6.4 用 图 层 组 组 织 图 像 


到 现在 , 我 们 拥有 了 相当 多 的 图 层 , 可 从 中 找到 我 们 需要 的 东西 就 有 点 难 了 。 好 在 Photoshop 
中 有 个 功能 可 以 让 我 们 很 方便 地 管理 这 些 东 西 。 所谓 的 图 层 组 实际 上 就 像 一 个 包含 了 很 多 图 层面 
板 的 文件 夹 ， 这 样 可 以 让 操作 变 得 方便 。 

创建 一 个 图 层 组 ， 需 要 在 图 层面 板 上 单 击 图 层 组 按钮 。 现 在 新 建 一 个 名 叫 Layout 的 图 层 组 。 
对 图 层 组 重 命名 的 方式 如 下 : 右键 单 击 图 层 组 ， 选 择 重 命名 选项 。 


然后 把 页 头 、 侧 边栏 、 主 体 和 页 脚 和 都 拖 放 到 这 个 组 里 面 。 


图 层 组 是 可 以 收 起 的 , 收 起 之 后 , 你 就 可 以 集中 精力 于 当前 的 工作 图 层 。 图 层 组 是 可 以 开局 、 
关闭 其 至 被 复制 的 。 这 些 功能 可 以 让 你 轻易 地 把 杂乱 的 东西 理 出 头绪 。 接 下 来 的 儿 届 中， 我们 会 
大 量 使 用 这 个 功能 来 保证 文档 是 有 序 的 。 


6.5 给 Logo 加 上 倒影 


Steve 想起 来 有 位 领导 说 想 给 Logo 加 上 倒影 。 现 在 有 很 多 页 面 都 采用 了 这 个 技术 ,了 最 终 效 末 
就 像 把 文字 或 者 Logo MEET EMRE, POC Fae Logo 就 会 像 站 在 它们 的 倒影 之 上 。 
用 图 层 组 和 绎 版 的 技术 ， 这 种 效 霖 实现 起 来 很 容易 。 

(1) 首先 新 建 一 个 叫做 Logo 的 图 层 组 ， 将 含有 Logo 的 那个 图 层 放 入 其 中 。 在 另外 一 个 图 层 
上 制作 Logo 岁 倒 影 ， 我 们 希望 这 两 个 图 层 能 组 织 在 一 起 。 

(2) 在 图 层面 板 里 ， 右 键 单 击 含 有 Logo 的 那个 图 层 ， 选 择 Duplicate Layer (复制 图 层 )。 将 
复制 得 到 的 图 层 命 名 为 Foodbox Logo Reflection 。 
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(3) 选中 倒影 图 层 , 选 定 Marquee (选择 ) 工具 , 在 图 片上 单 击 右键 , 选择 Free Transform (A 
由 变换 ) eT, BaP. FAA LRA AB TE A, TA PHL, BOE AED, 
IRAE TLR OPEL, JE T BCH. He ZEA ze, 倒 过 来 的 图 片 应 该 跟 原 来 的 Logo 
同 高 ， 你 可 以 借助 辅助 线 ， 也 可 以 在 拖 忠 的 同时 按 住 Shift 键 来 帮助 调整 高 度 。 

然后 按 下 Enter 确认 变形 。 用 Esc 键 则 可 以 撤销 变形 操作 ， 从 头 再 来 。 

(4) 倒影 的 淡出 效果 有 很 多 种 方法 可 以 实现 ， 最 简单 的 方法 是 使 用 Photoshop 的 图 层 壹 版 功 
能 。 选 中 刚刚 经 过 变形 的 那个 图 层 ， 单 击 图 层面 板 下 方 的 Add Layer Mask 按钮 。 弯 版 可 以 让 一 
张 图 片 的 某 些 部 分 隐 茂 起 来 不 显示 ， 换 名 话说 ， 图 层 被 察 版 遮 住 的 部 分 是 不 可 见 的 。 

(5) WRESTLE Toa Ae BR, BAZ PHA ae A aa ATH 
的 效果 。 从 工具 面板 中 选中 Gradient (渐变 ) 工具 一 一 广 意 ， 有 时 候 Gradient 工具 是 不 可 见 的 ， 
因为 它 跟 Paint Bucket (R) 工具 放 在 了 一 个 地 方 。 如 采 你 看 到 了 油 凌 桶 工具 ， 只 需要 点 住 
EAD, EPR OR AIS E at Gradient 工具 即 可 。 

Gradient 工具 的 选项 会 出 现在 Photoshop 窗口 中 靠 上 的 位 置 。 在 选中 潜 变 之 后 ， 你 就 应 该 能 
看 到 几 个 预制 的 痢 变 样式 ， 选 一 个 从 等 到 白 的 新 变样 式 。 

(6) 设置 好 潮 变 工具 ， 选 中 察 版 ， 按 住 Shift 键 的 同时 在 图 像 上 从 上 到 下 画 一 条 坚 线 ， 从 72 
像素 的 地 方 起 笔 ， 画 到 108 像素 的 位 置 。 


这 样 ， 渐变 的 黑色 部 分 就 形成 了 蒙 板 ， 从 而 得 到 我 们 想 要 看 到 的 淡出 效果 。 你 可 以 多 试 几 次 
以 达到 理想 的 效果 (参见 图 6-5)。 















































6-5 市 有 倒影 效 末 的 Logo 


跟 上 一 版 的 网 页 一 样 ， 页 脚 中 会 有 一 些 文字 ， 包 括 厂 权 信息 、 使 用 条 珀 和 隐私 信息 。 
选用 Text (文字 ) TA, HFa 10 像素 ， 字 体 设 为 Arial。 如 采 需 要 超 链 接 ， 把 超 链接 





D 如 采 你 不 想 这 样 手工 操作 ， 也 可 以 用 Flip Vertical transformation (X ARERI) 选项 翻转 图 片 ， 然 后 将 得 到 的 
图 片 拖 遇 至 原始 图 片 下 方 。 
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文字 设置 成 不 同 的 颜色 ， 并 把 版 权 信息 、 使 用 条 称 和 隐私 信息 的 链接 文字 放 在 不 同 的 图 层 上 。 
可 以 从 配色 方案 中 选 一 种 颜色 作为 超 链 接 的 颜色 。 

没 必 要 在 这 些 文字 上 花费 太 多 时 间 。 不 用 追求 完美 大 中 之 类 的 效 采 ,因为 这 些 东 西 壕 早 是 要 
放 到 内 容 文档 中 的 ， 现 在 只 需要 做 出 一 个 样式 页 ， 然 后 以 此 收集 反馈 。 





6.7 ”小结 


本 革 内 容 包 含 了 一 些 关 于 Photoshop 的 内 容 ， 你 学 会 了 如 何 导 入 文件 、 图 层 相 关 事宜 和 用 辅 
助 线 对 齐 元 素 。 现 在 ， 开 始 往 这 个 结构 中 填充 内 容 吧 。 


设计 样式 页 : 内 容 相关 


上 一 革 完 成 了 两 个 很 重要 的 任务 : 首先 是 将 页 面 划 分 成 了 四 个 区 域 , 其 次 是 设置 好 了 页 头 和 
页 脚 。 接 下 来 的 任务 则 是 往 侧 边 栏 和 主 区 域 填 充 内 容 了 。 同 时 ,你 还 要 做 出 搜索 框 和 标签 云 的 样 
式 来 ， 这 些 东 西 将 会 放置 在 侧 边 栏 中 。 在 主 区 域 里 ， 我 们 会 做 一 个 Banner 图 片 和 一 个 文字 版 的 
推荐 广告 ， 并 且 会 将 这 些 元 素 放 在 合适 的 位 置 。 


7.1 制作 搜索 框 


在 设计 草图 里 ,我 们 把 搜索 框 放 在 了 侧 边 栏 的 上 部 。 搜 索 区 域 会 有 一 个 较 大 的 标题 ， 搜 索 框 
在 标题 的 正 下 方 (参见 图 7-1) 。 接 下 来 再 一 次 利用 基准 线 网 格 将 元 素 放 置 在 网 格 线 上 ， 而 首先 要 
做 的 则 是 新 建 一 个 叫做 search area 的 图 层 组 。 这 个 图 层 组 会 包含 本 章 内 创建 的 所 有 东西 。 











7-1 完成 的 搜索 区 域 
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照旧 ,辅助 线 将 是 放置 元 素 的 得 力 助 手 。 先 在 左边 标尺 的 126 像素 的 地 方 放 一 条 水 平 的 辅助 
线 ,这 条 辅助 线 征 搜索 区 域 标题 所 在 位 置 的 参考 。 如 采用 标 斥 刻度 放置 辅助 线 的 方式 让 你 感觉 到 
无 聊 了 , 你 可 以 试 试 这 种 方法 : 输入 朝向 和 位 置 坐标 直接 创建 辅助 线 。 具 体 做 法 是 从 View 选 项 中 
选择 新 建 辅助 线 ， 然 后 输入 合适 的 参数 创建 。 用 来 确定 标题 的 第 二 条 辅助 线 应 该 在 162 像素 的 位 
置 。 虽 然 由 于 标题 的 上 沿 会 和 126 像素 位 置 的 辅助 线 重 合 ， 这 个 辅助 线 显 得 有 所 多 余 。 然 而 ， 标 
题 的 字 高 有 24 像素， 为 了 能 让 行 高 是 18 像 素 的 倍数 ,我们 需要 额外 的 空间 ， 这 就 导致 标题 的 行 
高 是 36 像素 。 


按 下 字母 工 键 激 话 文字 工具 。 将 字体 和 字号 分 别 设置 为 Monotype Corsiva 和 24pt, 将 文字 颜 
色 设 为 4B541C， 这 是 在 配色 方案 中 我 们 为 标题 选 定 的 颜色 。 在 刚刚 定义 的 那 条 辅助 线 的 下 方 单 
击 一 下 画布 ， 输 入 “Search Recipes”。 用 移动 工具 让 文字 和 辅助 线 对 齐 。 


接 下 来 要 用 绘制 工具 和 一 些 图 层 效 坟 来 画 出 搜索 框 。 首 先 需 要 用 辅助 线 来 划 定 搜索 框 的 区 
域 。 现 成 的 162 像素 位 置 的 辅助 线 已 经 标记 出 了 搜索 框 的 项 部， 我 们 还 需要 两 条 竖 直 的 辅助 线 ， 
分 别 位 于 270 (RRA 288 像素 的 位 置 ， 这 样 就 确定 了 搜索 框 和 按钮 的 位 置 。 注 夸 ， 每 条 辅助 线 部 
沙 人 在 了 网 格 上 。 


新 建 一 个 名 为 search box 的 图 层 。 选 用 和 矩形 工具 ， 将 填充 颜色 设置 为 FFFFFF， 在 辅助 线 所 
圈定 的 范围 内 划 出 一 个 搜索 框 。 右键 单 击 这 个 图 层 的 小 图 标 , 选择 Blending Options (混合 选项 )。 
从 弹出 来 的 对 话 框 中 进入 Stock (fi) 选项 卡 ， 将 描 边 大 小 设 为 1， 颜色 为 000000, 


7.2 ESME 


网站 是 使 用 标签 的 形式 来 组 织 菜 谱 分 类 的 。 用 户 可 以 为 来 谱 们 打上 标签 ,这样 在 大 量 的 菜谱 
中 可 以 方便 地 找到 想 要 的 东西 。 现 在 ， 不 少 受 欢 迎 的 网 站 都 会 用 标签 云 (tag cloud) 的 形式 来 显 
示 系 统 中 最 第 见 的 标签 。 标 签 去 会 用 不 同 大 小 的 字体 来 显示 关联 次 数 较 多 的 标 钨 。 例 如 ， 如 琳 被 
打上 “ 甜 护 ”标签 的 条 目 是 其 他 类 型 的 三 倍 还 多 ,那么 “甜点 ”这 个 标签 在 标签 云 中 的 字号 就 要 
比 其 他 的 标签 大 很 多 倍 。 我 们 会 做 一 个 类 似 于 图 7-2 的 效 霖 。 通 第 来 说 ， 标 铭 云 需要 5~6 种 不 同 
的 字体 大 小 ， 但 是 作为 一 个 样式 页 ， 大 、 中 、 小 三 种 字体 就 够 了 。 


还 是 先 从 标题 开始 吧 。 这 里 会 用 和 搜索 框 标题 一 样 的 字体 和 颜色 。 在 216 像素 和 252 像素 的 
地 方 分 别 放置 两 条 水 平 的 辅助 线 ， 标题 会 被 安放 在 其 中 。 新 建 一 个 图 层 ,， 按 下 字母 工 键 选 用 文字 
工具 , 再 确认 一 下 文字 颜色 是 4B541C， 跟 搜索 框 标题 一 样 是 那 种 带 点 绿 的 颜色 。 输 入 “Browse 
Recipes”, H Move (移动 ) 工具 将 文字 拖 遇 到 两 条 辅助 线 的 中 间 ， 然 后 将 这 些 文字 和 搜索 标题 
对 齐 。 注 意 辅 助 线 和 标尺 ， 要 学 会 使 用 它们 ! 如 果 用 鼠标 移动 不 是 很 方便 ， 你 可 以 尝试 用 上 下 左 
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右 四 个 得 头 来 进行 细微 的 调整 。 





7-2 SERCH RSE ZS 


现在 ， 可 以 开始 用 文字 工具 往 页 面 上 放 标 丛 了 。 举 个 例子 ， 选 择 一 个 18 RRF A Arial 
作为 字体 ， 选 上 加 粗 ， 把 颜色 调整 为 54431C， 键 入 “Desserts ”并 将 之 放置 在 辅助 线 之 间 。 然 后 
你 可 以 分 别 键入 几 个 不 同 的 标签 文字 , 每 个 标签 目 成 一 个 文字 块 ; 同时 要 注意 字体 、 字 所 的 不 同 ， 
要 把 它们 打 散 放 在 不 同 的 线 上 。 你 可 以 参 芳 图 7-2 WAR. 


7.3 WHEE 


项 目 进行 中 什么 最 令 人 头疼 ? JEBE (scope creep) “ 莫 属 。 说 起 来 似乎 我 做 过 的 每 个 
项 目 都 在 不 同 程度 上 受到 艺 围 芍 变 的 影响 。 有 时 候 压力 来 自 挑剔 的 客户 ， 有 时候 因为 狂热 的 销售 
经 理想 要 震惊 一 下 客户 。 


不 幸 的 是 , 这 就 是 人 生 …… 没 有 哪个 项 目的 要 求 是 被 刻 在 石头 上 的 。 作 为 开发 人 员 ， 你 需要 
学 会 去 适应 改变 。 因 此 , 为 了 让 你 这 个 开发 人 员 心 里 更 有 谱 ， 我 在 这 里 送 你 一 个 没有 在 草图 中 出 
现 的 设计 : 第 二 个 标签 云 。 
最 受 欢迎 食材 标签 去 


在 Foodbox 中 ,每 个 采 谱 都 列 出 了 所 需 食 材 ， 所 以 可 以 多 做 一 个 标签 云 ， 用 来 显示 最 受 欢 迎 
的 食材 。 这 一 次 ， 我 会 给 你 自由 发 挥 的 机 会 。 





O 也 译作 “范围 潜 移 ”或 “范畴 潜 变 ” 等 ， 指 无 视 时 间 、 成 本 等 因素 的 情况 下 改变 原 有 设计 或 增加 新 的 功能 。 
译 者 注 
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你 要 运用 从 上 一 个 标签 云 制 作 过 程 中 学 到 的 技巧 来 完成 这 个 新 的 设计 。 以 网 格 和 辅助 线 为 参 
考 来 放置 标题 和 其 他 元 素 ， 可 以 用 一 些 具 体 的 食材 ， 如 牛 至 、 和 菏 、 和 起 豆 、 平 末 、 香 合 、 奶 酷 和 生 
菜 等 ， 作 为 标签 云 的 内 容 。 


有 三 行 左右 的 标签 就 足够 填 满 侧 边栏 了 。 完 成 这 个 之 后 ， 我 们 将 页 面 的 中 间 区 域 填充 内 容 。 
7.4 做 一 个 美味 的 摘要 


图 片 能 让 页 面 更 显 生 动 。 当 然 , 你 也 可 以 用 大 量 的 颜色 , 不同 的 字体 或 其 他 东西 来 为 页 面 增 
E, 但 是 它们 都 比 不 上 一 张 高 质量 的 好 图 片 有 冲击 力 。 之 所 以 要 强调 高 质量 , 是 因为 低 质量 的 图 
FARAH EME, LAR AER. 











摄影 师 是 你 的 朋友 


如 果 想 要 靠 网 页 设计 来 挣 钱 , 你 可 能 需要 雇用 一 个 摄影 师 专门 为 你 拍摄 图 片 。 这样 做 的 
好 处 多 多 。 首 先 ， 你 可 以 不 用 亲自 去 学 相关 的 技术 ， 就 能 获得 自己 想 要 的 图 片 。 

虽然 雇用 专业 摄影 师 比 较 责 ,但 是 他 们 值 那 个 价 。 以 此 为 生 的 人 背 定 知道 掀 出 好 照片 的 
所 有 技巧 。 

如 果 你 觉得 专业 摄影 师 太 贵 ,或 许可 以 联系 一 下 本 地 的 摄影 俱乐部 ,看 看 有 没有 人 对 此 
有 兴趣 。 摄 影 俱乐部 里 的 会 员 大 概 都 只 是 业余 爱好 者 , 但 是 通常 来 讲 他 们 的 技术 也 不 错 。 记 
住 要 给 报酬 。 如 果 你 的 设计 是 有 偿 的 ， 那 么 他 们 的 服务 也 应 该 得 到 报酬 。 

不 管 你 打算 殿 一 个 专业 人 士 还 是 一 个 业余 爱好 者 ， 你 所 殿 的 人 一 定 要 是 个 专家 。 好 比 ， 
你 殿 程 序 员 的 时 候 , 是 会 考虑 一 个 专业 程序 员 , 还 是 某 个 大 学 未 毕业 只 想 给 自己 的 简历 添上 
一 笔 的 小 孩 ? 可 能 这 两 种 人 最 后 都 能 完成 你 分 配 的 工作 ， 但 专业 人 士 明 显要 更 可 靠 一 些 。 





摄影 是 个 技巧 活 ， 摄 影 师 需要 大 量 的 练习 做 基础 才能 拍 出 好 照片 。 我 之 所 以 知道 这 一 点 , 7E 
因为 我 自己 也 曾 花 过 大 量 时 间 去 拍照 片 , 却 连 门 都 没有 入 。 有 些 客 户 会 交 给 我 一 些 用 便携 式 数 码 
相机 拍 的 照 厂 ， 让 我 把 它们 放 在 网 页 上 。 那 些 通 第 部 十 晤 受 有 的、 皮 光 不 足 或 者 皮 光 过 度 的 照 厂 。 
虽然 用 Photoshop 可 以 修复 一 些 问题 ,但 是 更 好 的 方法 还 是 从 一 开始 就 用 那些 质量 好 的 图 片 。 

那么 ， 从 哪里 可 以 找到 适合 网 页 用 的 好 照片 呢 ? 如 采 你 的 预算 并 不 充足 ， 可 以 访问 
iStockphoto 这 个 网 站 ， 或 者 任何 其 他 的 图 片 分 享 站 。 甚 至 在 车 名 的 Flickr 上 都 会 有 无 版 权 或 免 
费 使 用 的 照片 。 











@ http://www.istockphoto.com, 
© http://www.flickr.com, 
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假设 我 在 iStockphoto 上 找到 了 一 张 意大利 面 的 图 标 ， 很 漂亮 ， 画 面 干净 而 且 曝 光正 第 。 但 
古 相 比 我 们 的 页 面 而 言 ， 图 片 和 敌 大 了 一 后。 没关系 ， 用 Photoshop， 我 们 能 从 这 个 照片 中 裁 出 
好 看 、 紧 次 的 长 方形 。 

在 样式 页 中 你 没 必 要 用 付费 的 图 片 。iStockphoto 中 的 图 片 都 有 水 印 ， 除 非 你 出 钱 买 下 它们 。 
打开 那个 图 片 链接 ， 在 训 览 共 中 对 着 图 片 单 击 右键 ， 用 复制 图 像 功能 将 图 乒 放 置 到 剪贴 板 中 。 

当 把 图 片 放 到 Photoshop 中 的 时 候 ， 要 调整 它 的 长 和 宽 让 图 片 变 大 。 这 种 做 法 对 样式 页 来 说 
古 可 以 的 , 但 是 , 记 住 永远 不 要 在 一 个 真实 的 页 面 上 用 这 种 图 片 。 如 末 你 有 可 用 的 照片 ， 那么 你 
应 该 有 高 画 质 的 版 本 ， 大 小 应 该 足够 。 在 客户 没有 批准 方案 之 前 ， 不 要 花 钱 严 这 个 图 片 。 





图 片 在 网 上 不 意味 着 它 是 免费 的 


很 多 人 认为 只 要 一 个 图 片 放 到 了 网 上 ， 或 者 出 现在 Google 图 片 搜索 的 结果 中 ， 那 他 们 
就 能 免费 地 把 这 些 图 片 用 在 自己 的 网 站 上 。 这 种 想法 是 荒 户 的。 实际 上 ， 图 片 的 版 权 属 于 拍 


缀 者 ， 或 属于 把 照片 公布 在 网 络 上 的 组 织 除非 页 面 上 有 其 他 的 声明 。 
在 使 用 任何 图 片 之 前 ， 需 要 得 到 许可 。 如 果 可 能 ， 应 该 拿 到 一 份 印 刷 版 的 许可 ， 或 者 是 
从 专业 的 图 片 社 购买 使 用 服务 。 





现在 把 这 个 Banner 放 到 页 面 上 吧 ， 节 后 得 到 的 结 朱 应 该 看 起 来 像 图 7-3 一 样 。 





7-3 目前 的 进展 


© http://www.istockphoto.com/stock-photo-3762 141 -italian-meatballs.php , 
@ MARTEL SER PEI KA, SKC Photoshop 中 单独 占 了 一 个 图 层 ， 可 以 方便 地 替换 掉 原 来 的 图 。 
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新 建 一 个 名 为 Main Group 的 图 层 组 ， 在 组 里 面 新 建 一 个 图 层 (Ctri+ShifttN), Ww Pasta 
Photo, H Move 工具 将 图 搬 的 左上 角 放 置 108 像素 的 水 平 辅助 线 和 306 像素 的 坚 直 辅助 线 的 交 
点 上 。 这 里 是 页 面 的 中 间 区 域 的 准确 边界 。 你 之 前 画 的 侧 边栏 和 页 头 的 辅助 线 的 相 汇 于 这 里 。 

按 下 M 键 选 定 Marquee LR, A REx TEAL A, W% Free Transform EM, PRIE Shift 的 同时 
将 图 片 的 右 下 和 角 问 对 角 线 的 下 方 拖 忠 ， 直 到 图 片 的 右边 磁 到 了 整个 页 面 的 右边 线 。 按 Enter 键 确 
定 变 形 。 

用 Marquee 工具 选 出 图 片 真正 所 要 显示 的 地 方 。 从 上 面 说 的 两 条 辅助 线 的 交点 开始 选择 , 选 
区 应 该 同 辅助 线 标记 出 的 区 域 一 样 大 。 用 癌 下 的 箭头 移动 选区 直到 选区 落 在 图 片 中 间 的 部 分 , 确 
保 选 区 包含 你 想 用 的 那 一 部 分 图 片 ， 然 后 从 Select 菜单 中 选 定 Inverse 选项 〈Ctrl+Shift+I) 。 用 
Delete 键 删除 不 需要 的 部 分 。 


最 后 ， 用 Move 工具 (快捷 键 V) 配合 箭头 键 将 图 片 移 回 辅助 线 划 定 的 Banner 区 域 。 
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BRT “Get Cookin” 这 几 个 字 之 外 ,我 们 还 不 知道 在 主页 上 要 说 些 什 么 ， 只 知道 需要 在 主页 
上 放 些 文字 。 虽 然 我 们 可 以 随意 拼凑 一 些 文字 , 但 古 说 不 定 束 会 有 人 对 这 种 做 法 吹 毛 求 病 。 因此 ， 
这 里 会 用 到 一 个 从 传统 的 印刷 业 中 偷 师 而 来 的 样式 页 技术 : Lorem Ipsum。Lorem Ipsum 是 一 段 无 
意义 的 文字 ，500 年 来 都 在 印刷 业 中 被 当 作 标 准 。 

第 一 眼看 上 去 ， 它 非常 像 真 实 的 文本 ， 所 以 很 适合 在 没有 实际 内 容 填充 的 时 候 ， 放 在 页 面 的 
TAKER. A http://lipsum.org 生成 一 段 文 字 。 这 种 不 知 所 云 的 文字 非常 有 用 , 它 让 人 们 的 注意 力 
集中 在 页 面 的 设计 而 不 钙 内 容 上 一 一 因为 任何 人 都 可 以 一 眼看 出 那些 文字 根本 设 有 意义 。 

让 我 们 来 给 这 个 页 面 加 挟 文 字 吧 ! 用 文字 工具 在 页 面 上 写 出 “Get Cookin” 这 儿 个 字 , 字体 
是 36 像素 的 Monotype Corsiva， 颜 色 是 4B541C。 这 个 文字 块 应 该 放 在 顶部 标尺 324 像素 和 左 部 
标尺 288 像素 交汇 的 位 置 ， 它 的 下 端正 好 是 第 一 个 标签 云 的 第 二 排 下 端的 网 格 线 。 


内 容 文字 


建立 一 个 新 的 图 层 Body Text, WIE Text 工具 。 在 左 标 尺 324 像素 和 486 像素 的 位 置 设 两 根 
辅助 线 ， 用 来 标注 文本 块 的 上 下 边界 。 在 上 方 标尺 612 像素 的 位 置 放置 一 根 竖 直 的 辅助 线 ， 确 





























中 Lorem ipsum 是 指 一 篇 常用 于 排版 设计 领域 的 拉丁 文 文章 ， 主 要 的 目的 为 测试 文章 或 文字 在 不 同 字 型 、 版 型 下 看 
起 来 的 效 末 。 
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定 文 本 块 的 宽 。 用 Text 工具 画 一 个 符合 辅助 线 框 定 区 域 尺 寸 的 矩形 ， 将 Lorm Ipsum 粘 帖 到 文本 
框 中 。 选 择 这 些 文字 ， 将 行 高 设置 为 18 像素 ， 字 体征 12 像素 大 的 Aria, MEIRE (参见 图 
7-4)。 这 样 文字 就 操 入 在 网 格 之 中 了 。 


-pe {PPT 
CI Regular 
m |) —__Psiee _ 


__‘Tofent ipsum dolor sit amet, consectetur adipisi 
peters e E ret tear | | Tee Wape 网 


lore magna aliqua. Ut enim ad mini JS os) a) 


Ee rts | oo 








proide 


sunt in culpa qui officia deserunt r 22 


| i 


| English: usA b$] aa| Sharp 





图 7-4 设 定 行 高 ， 让 文字 和 网 格 平 齐 


7.6 ”浏览 器 模仿 


到 目前 为 止 ， 我 们 建立 了 一 个 看 起 来 还 不 错 的 页 面 ， 但 是 还 没 法 推 新 它 在 浏览 丛 中 的 样子 。 
SUE EIS PPPS ce EE A, FED Ges AR Pe ATLA “Vato” 的， 所 以 需要 确认 一 下 这 个 页 
面 在 比 页 面 大 的 屏幕 上 看 起 来 是 怎样 的 。” 





从 荣 单 中 选择 Image (图 像 ) > Resize Canvas (调整 画布 大 小 )， 将 画布 的 大 小 从 900 像素 调 
整 为 1200 像素。 默认 设 定 下 Photoshop 会 在 原 有 画布 两 边 均匀 地 增加 像素 。 





在 最 开始 的 设计 中 ,我 们 决定 用 定 宽 的 方案 ,这样 会 让 设计 的 实现 过 程 变 得 简单 ， 但 是 从 样 
式 页 中 看 到 ， 在 页 面 的 两 侧 确实 有 空白 的 区 域 。 为 了 让 页 面 看 起 来 更 饱满 ， 一 个 解决 方案 征 将 
Logo 和 页 面 中 的 其 他 元 素 居 中 ， 然 后 将 背景 和 页 头 拉 伸 至 整个 窗口 的 宽度 ， 之 前 我 们 也 讨论 过 
这 个 方法 。 这 个 方法 会 让 页 面 有 一 个 全 屏 的 效 末 ， 等 到 代码 阶段 的 时 候 ， 再 来 化 更 多 的 时 间 实 现 
流动 性 页 面 的 设计 。 


选用 Move 工具 (V), 右键 单 击 页 涉 ， 从 弹出 的 夹 单 中 选择 页 涉 (header) 图 层 。 这 是 一 个 








O 你 可 能 还 记得 ,行距 指 的 是 个 两 条 基准 线 之 间 的 距离 (参见 第 4 章 )。 
© 对 于 以 前 用 纸张 工作 的 人 来 讲 这 是 一 个 大 问题 。 纸 是 有 边界 的 ， MMA. RRA ES ACW Ew 
界 世界 里 的 状态 。 
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选择 图 层 的 好 方法 ,不 用 再 去 图 层面 板 中 去 吉 二 寻找 了 。 选 择 Marquee 工具 ， 碳 键 单 击 页 头 ， 选 
择 Free Transform 工具 来 激活 变形 手柄 。 分 别 拖 忠 左右 的 两 个 手柄 至 画布 的 边 绿 ， 按 下 Enter 让 
变形 生效 。 

放大 画布 后 ， 你 可 以 看 到 页 面 最 终 呈现 在 屏幕 正中 的 效果 。 因 为 你 用 了 Photoshop 的 形状 工 
具 来 确定 页 面 的 不 同 区 域 ， 所 以 不 用 担心 在 变形 的 时 候 会 出 现 什么 质量 瑕 症 。 


混合 布局 


近 几 年 宽屏 的 流行 让 设计 师 开 始 思考 新 的 设计 方式 来 利用 屏幕 新 的 长 宽 比 。 混 合 布局 指 
的 是 页 面 的 多 数 部 分 都 用 的 定 宽 布局 ， 但 也 有 可 以 随 着 窗口 变化 而 撑 满 浏览 器 宽度 的 区 域 。 


这 种 布局 最 近 变 得 很 流行 。 

可 以 变化 的 部 分 通 第 是 页 头 , 主 要 内 容 区 域 还 是 居中 的 ,就 像 在 设计 中 显示 出 来 的 那样 ， 
有 时 也 称 之 为 “可 伸展 ”。 这 样 带 来 的 效果 是 页 头 和 页 脚 都 榜 满 了 屏幕 帘 ， 读 者 的 注意 力 集 
中 在 页 面 的 主要 内 容 上 ， 提 高 了 可 读 性 和 组 织 性 。 





7.7 小结 


在 这 一 革 里 我 们 新 建 了 不 少 元 素 , 也 学 会 了 如 何 模仿 显示 如 中 网 页 的 显示 效 末 。 在 开始 将 样 
式 页 变 成 代码 之 前 ， 还 有 些 东 西 要 添加 到 页 和 面 中 。 开 始 吧 | 


ESUR EMIR EA 





Foodbox 上 已 经 有 了 不 少 元 素 了, 我 们 还 需要 为 它 加 上 一 个 搜索 图 标 , 用 来 做 搜索 框 的 按钮 。 
男 外 还 需要 在 主要 区 域 中 添加 一 个 网 站 注册 按钮 。 


当然 ， 你 可 以 上 网 找 一 个 珊 有 放大 镜 的 图 标 作 为 按钮 ， 或 者 用 一 个 按钮 生成 右 来 做 一 个 。 但 
征 ， 跟 你 写 代 码 一 样 ， 目 己 做 的 可 调整 的 东西 往往 最 适合 上 自己 的 项 目 。 不 合 时宜 的 图 标 可 能 会 毁 
掉 束 个 网 站 议 计 。 而 且 ,， 你 用 来 搜索 的 时 间 往 往 可 以 用 来 制作 目 己 的 图 标 一 一 通 贡 上 只 需要 几 分 钟 
而 已 。 


你 可 以 将 这 些 图 片 放 在 之 前 的 那个 文件 里 面 , 但 是 为 了 让 文件 保持 秩序 , 我们 还 是 在 新 文件 
中 创造 这 些 元 素 吧 。 


8.1 制作 搜索 图 标 


制作 搜索 图 标 , 用 Photoshop 或 者 Illustrator 都 可 以 。 如 有 果 图 标 要 放大 缩小 到 不 同 的 大 小 使 用 ， 
那么 最 好 还 是 用 Illustrator。 从 制作 Logo 的 过 程 中 我 们 知道 ， 矢 量 图 形 可 进行 平 请 的 放大 缩小 ， 
没有 质量 损失 。 只 是 现在 我 们 只 需要 一 个 简单 的 搜索 图 标 按钮 ， 因 此 用 Photoshop 可 以 快速 地 做 
完 这 个 东西 。 


新 建 一 个 名 为 Search Icon 的 Photoshop 文档 ， 长 宽 都 设 定 为 18 像素 ， 背 景色 被 透明 ， 分 辩 


率 是 72dpi。 

















8.1.1 创建 图 标 背 景 


按 住 Ctrl 和 空格 键 ， 单 击 鼠 标 放大 图 片 。 每 次 单 击 图 片 就 会 放大 到 兄 一 放大 比例 ， 一 直 单 击 
mIRE PBC EE Bile 1200%。 这 时 ， 你 可 以 看 到 画布 是 类 似 国 际 象棋 棋盘 的 样子 ,这 说 明 现在 图 
FIR REEE, 
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将 图 层 的 名 字 从 Layer 1 (图 层 1) 改 成 Background， 然 后 在 工具 面板 上 选择 圆 角 矩形 ， 将 
Radius 《 圆 半径 ) 设置 为 2 像素 。 注 意 在 这 里 把 单位 设 定 为 像素 十 非常 重要 的 ， 不 然 Photoshop 
会 用 默认 设 定 里 的 测量 单位 ， 比 如 闫 寸 什 么 的 。 将 工具 的 模式 调整 为 Fill Pixels (填充 模式 )， 勾 
选 Anti-Alias ( 反 锯 齿 ) 选项 。 颜 色 没 必要 设置 ， 因 为 稍 后 我 们 就 会 调整 它 。 


对 齐 像 素 


我 们 之 前 用 过 Snap to Grid (对 齐 网 格 )， 这 个 功能 可 以 约束 画 出 来 的 形状 ， 只 不 过 现在 要 做 
的 形状 更 复杂 一 点 ， 和 古市 有 圆 角 的 。Snap to Grid 可 以 帮 我 们 确保 圆 角 的 每 一 边 看 上 去 都 是 一 样 
的 。 为 了 保证 绘制 的 形状 跟 像素 对 齐 ， 单 击 形状 工具 选择 强 右 边 的 第 头 ， 勾 选 Snap to Pixels 选 
项 。 我 建议 在 制作 图 标 甚至 制作 整个 样式 页 的 过 程 中 ， 都 选中 这 个 选项 。 


把 鼠标 放 在 画布 的 左上 角 , 按 住 鼠 标 不 动 , 将 之 治 着 对 角 线 癌 布 下 角 拖 卡 ， 当 鼠标 和 画布 的 
右 下 角 重 合 的 时 候 ， 放 开 鼠 标 ， 形 状 绘制 完成 。 


右键 单 击 图 层 的 缩 略图 ， 选 择 Blending 选项 。 在 Gradient Fill (WRAT) 选项 卡 里 单 击 
Gradient 风格 以 编辑 渐变 的 具体 样式 。 把 渐变 条 石 端的 颜色 改 成 之 前 标题 用 的 那 种 绿色 ， 然 后 把 
左 端 的 颜色 设 为 有 黑色 (000000)。 将 这 个 渐变 风格 应 用 到 图 层 上 之 后 ， 你 会 看 到 一 个 从 绿色 过 渡 
到 黑色 的 矩形 ， 如 图 8-1 所 示 。 




















8-1 用 Marquee 工具 选择 出 来 的 圆 形 选 区 


8.1 制作 搜索 图 标 “A 81 
8.1.2 绘制 放大 镜 
现在 轮 到 画 放大 镜 了 。 虽 然 Photoshop 提供 了 一 些 很 不 错 的 形状 工具 ， 但 是 我 们 会 用 一 种 比 
较 古老 的 Photoshop 技巧 来 绘制 放大 镜 : 利用 它 的 Marquee 工具 。 


创建 一 个 名 为 Magnifying Glass 的 图 层 。 从 工具 面板 中 选择 Elliptical Marquee (椭圆 选择 ) 
工具 。 按 住 Shift 键 的 同时 ， 在 图 标 区 域内 画 一 个 圆 形 ， 画 出 来 的 效果 就 像 图 8-1 里 面 那样 。 在 
编辑 菜单 中 选择 描 边 ， 宽 度 设置 为 2 像素， 颜色 为 白色 。 


选用 Line-drawing 工具 , 将 笔画 Weight (粗细 ) 设置 为 2 像素 , 在 放大 镜 的 左下 画 一 条 斜 线 ， 
当 作 把 手 。 可 以 参考 图 8-2。 





8-2 ”市 把 手 的 放大 镜 





现在 ,我 们 需要 往 上 面 加 一 点 玻璃 的 效 末 。 虽 然 选 择 工 具 可 以 选中 刚刚 画 的 圆圈 内 部 ， 但 是 
那 太 费事 了 ， 用 Magic Wand (魔杖 ) 工具 选择 圆圈 会 更 容易 些 。 从 工具 面板 中 选择 Magic Wand 
工具 ， 在 圆圈 内 部 单 击 一 下 ， 这 样 这 块 区 域 就 被 选中 了 。 

新 建 一 个 叫做 Glass 的 图 层 。 将 Foreground Color (前 景色 ) 设置 为 白色 (FFFFFF) ， 选 中 
Gradient Fill 工具 。 在 Options 工具 栏 中 双击 斋 变 图 案 ， 预 置 模式 中 选择 Foreground to Transparent 
(前 景色 变 透 明 )。 设 置 好 以 后 在 放大 镜 内 部 从 上 到 下 夯 一 条 直线 ， 记 住 按 住 Shift 再 画 ， 可 以 画 
出 竖 直 的 直线 。 
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完成 上 面 的 步骤 后 ， 你 应 该 得 到 一 个 类 似 于 图 8-3 里 的 图 案 ， 保存 Photoshop 文档 ， 命 名 为 
search button.psd， 中 其 他 的 Photoshop 文件 一 样 放 在 originals 文件 夹 中 。 





图 8-3 ”完成 的 图 标 
8.1.3 ”放置 搜索 图 标 


切换 回 样式 页 的 文档 , 单 击 File 采 单 下 的 Place 选项 ,选择 刚才 创建 的 search_button.psd, 将 
它 放 置 在 搜索 框 的 旁边 。 摆 放 好 之 后 ， 保 存 文件 。 图 8-4 是 完成 后 的 搜索 区 域 的 效果 。 





8-4 ”完成 的 搜索 区 域 


8.2 ”创建 注册 和 登录 按钮 


FERR, 页面 的 右 侧 有 两 个 很 大 的 按钮 。 在 样式 页 的 空白 处 创建 这 两 个 按钮 ,我们 需要 用 
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到 在 8.1 贡 中 用 到 的 一 些 技巧 。 新 建 一 个 文档 ， 名 叫 button。 青 景色 为 透明 ， 宽 216 像素 ， 高 72 
像素 。 这 样 的 玉 寸 可 以 很 好 地 融入 到 样式 页 中 的 空白 空间 。 


选择 Rounded Rectangle 〈 圆 角 和 矩形 绘制 ) 工具 ， 将 圆 角 半径 设置 为 10 像素 ， 这 样 我 们 的 按 
HA AEH Al FA 


从 图 层面 板 中 建立 一 个 新 图 层 ， 或 者 用 快捷 键 Shift+Ctrl+N。 取 名 为 button background, 3 
们 会 在 这 个 新 图 层 上 画 出 按钮 。 


用 刚刚 设置 好 的 圆 角 算 形 画 出 按钮 。 具 体 做 法 是 : 从 画布 左上 和 角 开 始 按 下 鼠标 拖 忠 至 右 下 
角 。 如 朵 你 设置 的 前 景色 不 是 白 色 ， 画 出 来 的 效 末 应 该 更 清楚 些 。 但 吓 无 论 什 么 颜色 都 不 要 紧 ， 
马上 我 们 就 会 更 改 颜色 了 。 


后 右键 单 击 有 按钮 的 那个 图 层 ， 选 择 Blending Options。 在 弹出 的 Layer Style (图 层 样式 ) 
窗口 see Gradient Overlay (渐变 又 加 )。 双 击 窗 口中 的 渐变 图 案 打 开 Gradient Editor (41484 
tae) 。 如 图 8-5 Brox, BEARS 1 标 出 ， 淘 变 点 则 是 2。 
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我 们 需要 一 些 设 计 , 好 让 按钮 具有 可 识别 性 。 将 渐变 画 好 的 关键 在 于 控制 颜色 在 新 变 中 的 变 
EERE., WE maA E, AMAER EE. 
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单 击 闫 色 桶 来 设 定 渐变 中 的 颜色 。 当 你 第 一 次 打开 Gradient Editor 的 时 候 ， 渐 变色 带 上 默认 
只 有 两 个 颜色 桶 ， 单 击 颜色 桶 之 间 的 空白 地 区 可 以 增加 颜色 同 的 数量 。 


按钮 只 需要 两 种 颜色 , 但 古 却 需 要 三 个 颜色 桶 来 设置 过 渡 。 将 最 右 端 和 最 左 端 的 颜色 桶 都 设 
J FFEABF, 然后 在 色 带 下 方 两 个 闫 色 桶 的 中 间 单 击 一 下 鼠标 , 添加 一 个 颜色 桶 。 这 个 闫 色 桶 的 
颜色 是 FFAE00， 是 侧 边栏 中 的 楼 色 变 化 出 来 的 颜色 。 


注意 编辑 磺 中 痢 变 带 下 方 的 小 圆 点 。 回 不 同 的 颜色 桶 移动 这 些小 点 ， 可 以 增 大 或 减 小 颜色 在 
淆 变 中 的 混合 程度 。 我们 要 的 按钮 需要 一 个 比较 突然 的 过 渡 ， 所 以 让 右边 的 那个 点 尽 可 能 地 靠近 
中 间 的 颜色 桶 。 这 样 按钮 中 间 就 会 出 现 一 条 水 平 的 线 ， 让 其 显得 有 立体 感 。 在 图 8-5 中 可 以 看 到 
我 给 出 的 具体 设置 。 设 置 好 痢 变 后 单 击 OK 按钮 。 你 也 可 以 目 己 动手 试 试 这 个 编辑 融 ， 图 8-6 里 
就 是 一 些 不 同 的 效 朱 示例 。 
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在 按钮 四 周 加 个 边框 能 更 加 突出 按钮 。 在 图 层 效果 中 选择 Stroke， 笔 画 宽 设 为 1 像素 。 用 起 
色 或 者 类 似 的 瞳 色 可 以 突出 按钮 , 而 浅 色 的 边框 则 让 边框 不 那么 明显 。 可 以 把 透明 度 降 到 45% 来 
软化 边框 。 记 住 要 选择 内 边框 ， 不 然 边框 会 改变 按钮 的 长 宽 (参见 图 8-7)。 





8-7 ”完成 的 按钮 


将 按钮 存 成 button.psd 文件 ， 放 到 originals 文件 来 下 ， 待 会 儿 你 需要 它 来 创建 登录 按钮 。 
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8.2.1 添加 文字 


选用 Text 工具 ， 在 按钮 上 加 上 “Sign Up” 这 几 个 字 ， 你 可 以 根据 颜色 理论 ， 试 试 不 同 的 颜 
色 。 我 建议 给 文字 使 用 一 种 比较 暗 的 颜色 ， 不 管用 什么 颜色 ,都 要 注意 让 文字 与 按钮 背景 明显 地 
区 分 开 来 。 也 可 以 试 试 给 文字 图 层 加 上 一 些 效 果 让 它 显 得 更 立体 。 


将 这 个 文件 存 为 signup_button.psd, 
8.2.2 添加 注册 按钮 

切换 到 样式 页 文档 ， 用 放置 Logo 的 方式 将 按钮 导入 进 文档 。 将 按钮 放置 在 页 面 中 为 其 
的 位 置 上 。 

记得 你 存 文件 。 

创建 登录 按钮 


重新 打开 signup_button.psd XF, KLEAR “LogIn”, EF% Move 工具 ， 调 整 文字 的 位 置 
让 其 在 按钮 上 居中 。 之 后 保存 文件 ,命名 为 login_button.psd， 将 文件 导入 样式 页 中 ， 放 在 注册 按 
钮 的 下 方 。 


在 图 8-8 中 可 以 看 到 摆 放 好 的 按钮 。 


vn B@aana 
evoke Gite e Tee) | 
Sr + 1 


8-8 ”两 个 按钮 就 位 
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83 文字 内 容 来 了 


Steve 告诉 你 ， 老 板 们 终于 确定 了 在 主页 上 要 放 的 文字 了 。 他 们 很 喜欢 页 面 现 在 的 样子 ， 但 
古 也 罕 沉 到 了 整个 页 面 还 有 不 少 的 留 白 , 所 以 他 们 决定 保留 原来 那个 版 本 中 新 添加 的 沫 谱 出 现在 
首页 上 的 功能 。 他 们 想 在 首页 上 择 放 的 文字 如 下 : 


Foodbox is the best way to collect and share recipes with the rest of the world. You can 
build your own recipe book from thousands of great recipes from renowned chefs or users 
Just like you. You can also share your own secret recipes with a few of your friends or make 


them available to the rest of the world! 


Create an account today and get cookin’! 


8.3.1 蔡 换 挥 原来 的 乱码 


替换 文字 的 工作 很 简单 。 将 上 述 文字 放 在 页 面 中 的 文字 区 域 中 ,， 删 掉 之 前 的 那 段 乱码 。 但 是 
你 会 发 现 这 段 文字 可 能 比 原 来 那 段 要 短 ， 所 以 我 们 需要 做 一 些微 调 。 选 中 刚刚 粘贴 到 页 面 上 的 文 
字 ， 将 字号 改 成 14 像素 。 可 能 这 样 做 还 不 足以 占 满 之 前 那 段 文字 所 占 的 空间 ， 但 征 你 现在 有 了 
多 余 的 位 置 来 放 老 板 们 要 求 的 全 谱 。 


8.3.2 添加 “最 新 菜谱 区 


其 实 我 们 不 必 填 满 页 面 下 方 的 所 有 空间 ,用 一 个 标题 加 一 些 文字 块 来 显示 荣 谱 就 可 以 了 。 做 
一 个 新 的 16 像素 的 标题 ， 标 题 的 内 容 是 “Latest Recipe”, 字体 是 Monotype Corsiva， 跟 其 他 的 标 
题 一 样 。 将 这 个 标题 放 在 那 段 介 绍 文字 的 下 方 ， 记 得 在 它们 之 间 空 出 一 些 空间 。 你 可 以 复制 
“Get Cookin'” 图 层 ， 调 整 文字 的 位 置 ， 这 样 就 跳 过 了 选 字体 、 字 号 和 颜色 儿 个 步 桑 ， 可 以 快速 
地 做 好 这 个 新 标题 一 这 就 是 所 谓 的 捷径 。 

在 刚刚 做 好 的 标题 下 面 加 上 一 些 假 的 菜谱 ， 这 次 我 们 用 14 像 素 大 小 的 Arial 字体 。 让 菜谱 文 
字 有 个 稍微 靠 右 的 缩 进 一 18 像 素 ， 也 就 是 一 整个 网 格 单位 的 距离 ， 可 以 参考 标签 云 的 效果 。 每 
个 菜谱 自 成 一 行 ， 每 一 行 之 间 都 要 有 一 个 行 高 的 距离 ， 用 网 格 线 作为 参考 ， 

在 菜谱 下 面 为 其 加 上 描述 ,用 12 像素 大 小 的 Arial 字体 ,同样 给 它 18 像素 的 缩 进 。 在 图 8-9 
中 可 以 看 到 效果 。 
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Latest Recipes 


Stuffed Chicken Breast 


Alightly-breaded a chicken stuffed with mushrooms and Swiss cheese. 
Easy to make even for beginners! 





























图 8-9 “最 新 末 谱 ”区 
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现在 ， 你 可 以 创建 一 个 真实 的 页 面 了 。 在 这 部 分 中 ， 你 学 会 了 如 何 用 图 层 组 工作 ， 如 何 处 理 
文本 ， 如何 运用 去 版 和 一 些 图 层 效 末 。 oueini 起程 中 走 非 浓重 要 的 ， 因 为 每 
次 你 都 需要 向 客户 展示 一 个 醒目 且 吸 引信 的 演示 页 。 最 后 ， 当 你 需要 搭建 一 个 最 终 版 页 面 的 时 
修 ， 这 个 样式 页 会 给 你 提供 切实 可 用 的 参考 (参见 图 8-10)。 





Dass | 

Get Cookin 
Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 

chefs or users just like you. You can also 
share your own secret recipes with a few of your 
friends or make them available to the rest of the 
world! 

























Create an account today and get cookin! 









Latest Recipes 


Stuffed Chicken Breast 


A Bays breaded breast of Shes stuffed with mushrooms and Swiss cheese. 
Easy to make even for beginners! 





图 8-10 ”完成 的 样式 页 (5 RHE) 
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为 样式 页 面 添砖加瓦 

使 用 CSS 布局 

利用 覆盖 法 替换 各 区 域 中 的 标题 
添加 样式 

制作 打印 机 友好 的 页 面 


用 HTML 做 出 主页 


你 已 经 在 设计 页 面 上 化 了 大 把 的 时 间 了 ， 现 在 要 做 的 征 将 这 个 样式 页 转换 成 功能 齐全 的 网 
页 。 这 个 过 程 需 要 经 过 几 个 步 又 。 先 要 考虑 以 什么 样 的 结构 来 组 织 内 容 ， 其 次 要 写 出 HTML 的 
框架 ， 用 人 简单 并 且 结 构 化 的 标签 来 定义 页 面 上 的 区 域 。 最 后 ， 需 要 用 CSS 来 为 内 容 添 加 上 基本 
样式 布局 。 同 样 地 ， 你 还 需要 为 页 面 添 加 颜色 、 字 体 样式 和 图 片 。 


在 这 一 章 中 , 我 们 先 要 架 起 HIML 文档 的 框架 , 然后 在 接 下 来 的 三 革 中 , 会 研究 如 何 用 CSS 
来 实现 页 面 上 的 各 种 设计 。 


网 页 跟 Photoshop 文档 中 被 固定 的 画布 是 不 一 样 的 ， 所 以 有 时 转换 的 时 候 会 出 现 偏差 。 跟 我 
们 通常 看 见 的 插图 小 册 或 者 海报 不 同 , 网 页 的 大 小 是 会 变化 的 ， 因为 浏览 器 的 显示 区 域 会 随 着 屏 
各 大 小 或 是 窗口 大 小 的 改变 而 变化 。 比 如 ,用 户 可 能 会 用 一 个 很 小 的 窗口 来 查看 网 页 ， 也 可 能 会 
将 窗口 最 大 化 到 跟 屏 硕 一 样 的 长 宽 来 浏 咒 。 因此, 你 几乎 需要 在 制作 过 程 中 不 断 地 做 出 调整 来 满 
ERER. 虽然 完成 果 页 面 跟 样式 页 看 起 来 不 会 一 模 一 样 , TA ET ARR i ee LP EB 
的 ， 大 多 数 人 部 不 会 完 得 网 页 跟 样 式 页 有 什么 不 同 。 所 以 ， 不 要 纠结 于 如 何 让 网 页 和 样式 页 完全 
相同 一 一 这 很 重要 。 








W 小 乔 爱问 .……. 
局 我 已 经 掌握 HTML 了 ， 还 需要 继续 看 完 这 章 吧 


J 


你 可 能 已 经 熟悉 HTML 了 ， 并 且 知 道 浏览 器 呈现 页 面 的 基本 概念 ， 但 这 还 不 够 。 想 想 
当初 你 花 了 多 长 时 间 才 能 写 出 优良 的 代码 。 要 知道 ， 需 要 学 习 的 不 仅仅 是 HTML 的 语法 ， 
还 包括 这 些 语句 背后 的 原理 。 如 果 不 了 解 其 背后 的 原理 ,那么 你 就 很 难 搞定 样式 表 ; 将 它 实 
现成 可 以 跨 浏 览 器 正常 浏览 的 网 页 就 更 困难 了 。 本 章 内 容 将 引导 你 去 理解 HTML, 而 不 是 浅 
党国 止 。 你 会 从 单纯 地 手写 HIML 代码 ， 进 步 到 最 后 用 后 台 程 序 生成 HTML, 
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9.1 网 页 标准 化 


程序 员 总 在 考虑 “分 离 ” 这 个 问题 。 开 发 网 络 应 用 的 时 候 ， 通 毅 会 涉及 模型 (model), PEt 
at (controller) 和 视图 (view) 三 个 部 分 ， 作 为 程序 员 ， 将 显示 层 的 逻辑 和 业务 层 的 逻辑 分 开 ， 
古 一 个 很 好 的 习惯 。 网 页 设计 师 对 这 个 理念 也 有 很 好 的 理解 。 一 个 按照 网 页 标准 设计 的 页 面 ,会 
把 页 面 内 容 从 设计 和 行为 中 刊 离 出 去 。 


Web 标准 化 通常 是 指使 用 标准 化 的 方法 和 理念 来 制作 网 页 。 像 W3C (World Wide Web 
Consortium， 万 维 网 联盟 ) 这 种 制定 标准 的 联盟 会 出 台大 量 相关 的 标准 。 另 外 ， 网 页 设计 社区 中 
的 先头 兵 们 使 用 的 好 方法 和 形成 的 好 习惯 ， 也 会 慢 慢 地 变 成 标准 。 


遵从 网 页 标准 化 的 网 站 和 页 面 通常 有 以 下 儿 个 特性 。 


口 用 合法 的 HTML 或 者 XHTML 标签 来 组 织 网 页 的 结构 和 内 容 ， 其 中 包括 正确 的 doctype 
设置 和 编码 设 定 (character set)。 
口 用 合法 的 CSS 来 呈现 页 面 样式 ， 这 意味 着 页 面 的 布局 、 文 字 颜 色 、 字 体 、 页 面 颜 色 和 其 
他 任何 非 内 容 的 元 素 都 是 用 CSS 来 控制 的 。 
O 任何 人 (包括 残障 人 士 ) 在 任何 平台 上 用 任何 训 览 红 都 可 以 访问 这 个 网 站 。 
O 导航 、 链 接 和 结构 符合 基本 的 可 用 性 规范 。 
O 页 面 动作 跟 内 容 和 样式 是 分 离 的 。JavaScript 部 分 应 该 可 以 在 所 有 平台 上 正常 运行 ， 在 不 
支持 JavaScript 的 设备 、 平 台 上 ， 或 是 面 对 那 些 无 法 使 用 JavaScript 的 用 户 时 ， 页 面 的 基 
本 功能 仍然 正 稍 。 
这 些 要 求 听 起 来 很 合理 ， 但 是 到 底 要 怎么 实现 这 些 要 求 呢 ? 本 音 会 从 HTML 文档 开始 
写 一 个 合法 的 HTML 文档 来 组 织 内 容 和 页 面 结 构 。 如 果 你 有 过 一 些 HTML 的 相关 经 验 ， 这 部 分 
对 你 来 说 是 小 菜 一 碟 。 即 便 你 从 来 没 和 HTML 打 过 交道 ， 也 不 必 担 心 。 跟 随 着 本 革 的 课程 ， 你 
能 很 快 地 学 会 。 


9.2 首页 的 结构 
试 着 将 页 面 想象 一 块 块 由 内 容 组 成 的 区 域 , 而 不 是 行 和 列 的 组 合 。 这 种 角度 会 帮 我 们 开发 出 
既 符 合 标准 又 有 灵活 性 的 页 面 一 一 即便 在 切断 样式 表 的 关联 之 后 ， 还 能 改变 页 面 的 布局 。 


对 于 Foodbox 来 讲 ， 我 们 希望 侧 边栏 和 主 区 域 的 内 容 都 能 各 居 其 所 。 所 以 ,要 把 刚刚 做 样 去 
页 时 做 过 的 事情 再 来 一 过 : 将 页 面 划 分 成 不 同 的 区 域 。 


基本 上 ， 需 要 将 样式 页 划分 成 如 下 几 个 区 域 : 
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OQ 页 头 

O 侧 边 栏 
D 主要 区 域 
o 页 脚 


这 四 个 区 域 是 很 容易 就 能 看 出 来 的 。 然 而 ， 如 来 想 要 建立 一 个 更 加 灵活 的 结构 ,以便 可 以 更 
轻 多 地 控制 它 ， 你 还 需要 在 这 几 个 区 域 下 面 划 分 出 几 个 子 区 域 。 为 了 达到 这 个 目的 ， 需 要 找 出 内 
容 和 内 容 之 间 的 逻辑 联系 。 


为 了 蕉 例 说 明 ， 我 们 将 样式 页 的 区 域 用 大 纲 表 现 出 来 : 


O 页 面 
-Rk 
-页 中 
* 侧 边 栏 
. TBR 
He TE Dl DE 
* 最 受 欢 迎 食材 
* 主要 区 域 
-页 脚 





在 上 面 的 例子 中 ， 最 外 面 的 一 层 是 页 面 ， 然 后 我 们 将 这 一 层 分 成 了 页 头 、 页 中 和 页 脚 三 个 区 
域 。 这 个 叫做 页 面 的 外 层 区 域 (或 父 区 域 ) 的 部 分 ， 可 以 作为 定位 页 面 内 元 素 的 参考 。 同 时 ， 页 
面 总 宽度 也 可 以 通过 改变 这 个 父 区 域 的 宽度 来 调整 。 


侧 边 栏 和 主要 区 域 被 一 个 叫做 页 中 的 容 融 包 夺 着 。 同 样 的 , 这 个 页 中 区 域 也 可 以 作为 参 芬 操 ， 
但 是 它 还 扮演 一 个 更 重要 的 角色 : 提供 灵活 性 。 可 能 在 有 的 页 面 上 , 不 需要 侧 边 栏 ， 而 需要 把 整 
个 页 中 区 域 都 用 来 显示 主要 站 容 。 那 么 在 这 些 页 面 上 ,我 们 就 可 以 去 醒 侧 边栏 区 域 ， 把 内 容 都 放 
在 主 区 域 中 ， 然 后 用 CSS 来 调整 它 的 大 小 。 
这 种 结构 其 实 是 很 第 见 的 , 古 一 种 标准 的 市 页 涉 和 页 脚 的 两 栏 布局 结构 ,也 古 在 网 页 中 最 肖 
见 的 布局 方式 。 标 准 化 的 设计 市 来 的 好 处 是 ， 如 末 你 愿意 ， 网 页 框架 可 以 在 另外 一 个 项 目 中 重复 
使 用 ， 因 为 那些 跟 列 宽 、 配 色 和 其 他 视觉 相关 的 元 素 是 单独 存储 在 样式 表 中 的 。” 











D 这 种 方式 对 于 设计 网 站 的 外 观 非常 有 帮助 ， 你 可 以 使 用 这 种 技术 让 用 户 选 择 喜 爱 的 主题 。 访 癌 http://www. 
csszengarden.com 站 点 ， 这 里 面 有 一 个 很 强大 的 示例 ， 演 示 如 何以 不 同 的 方式 呈现 同一 个 文档 。 
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9.3 语义 化 的 标签 
语义 化 标签 组 织 的 文档 能 同时 被 机 右 、 设 备 和 人 读 民 。 例 如 Google 的 网 络 爬 虫 会 利用 链接 
中 hl、href 或 类 似 标 签 来 确定 网 页 和 了 网 页 上 内 容 的 优先 级 。 


WW 小 弄 爱 问 ……… 
过 ”为 什么 不 对 样式 页 进行 切片 





在 网 络 开 发 的 早期 指 的 是 2004 年 以 前 的 “中 世纪 ”， 用 Fireworks 或 者 ImageReady 
一 类 的 工具 来 对 Photoshop 文档 进行 切片 是 开发 者 的 常用 手段 ， 切 片 好 的 文档 可 以 转化 为 
HTML 文件 。 这 种 手法 虽然 快速 但 质量 不 高 ， 因 此 也 引出 了 不 少 严 重 的 问题 。 


壁 如 切片 得 到 的 HTML 总 是 用 table (表格 ) 标签 来 进行 布局 ,虽然 在 使 用 CSS Zar, 
这 是 大 多 数 网 页 设计 师 采 用 的 技术 。 这 种 技术 带 来 的 问题 也 有 很 多 ,比如 说 给 使 用 屏幕 阅读 
器 “的 用 户 造成 了 极 大 障碍 。 


同时 ,这 种 方法 也 没有 把 内 容 和 样式 分 离开 ， 所 以 你 没 法 便捷 地 调整 页 面 内 容 的 显示 样 
式 让 它 具 有 更 强 的 适应 性 ,这样 就 无 法 很 好 地 满足 各 种 需求 ， 如 打印 机 友好 页 或 者 是 适合 移 
动 设备 显示 。 

最 后 ， 也 是 最 重要 的 一 个 原因 是 ， 如 果 使 用 了 表格 布局 ， 那 么 HTML 代码 中 关于 表格 
的 代码 将 不 得 不 在 每 一 个 页 面 上 都 被 重复 一 遍 。 每 次 用 户 发 出 一 个 页 面 请 求 ,这 些 数据 就 会 
被 传送 一 次 。 对 于 规模 比较 小 的 网 站 来 说 ， 这 会 导致 页 面 呈 现 到 用 户 面前 所 需 的 时 间 变 长 ; 
对 于 访问 量 大 的 网 站 来 讲 ， 你 会 从 ISP 每 个 月 等 给 你 的 账单 中 看 到 表格 布局 对 你 的 影响 。 因 
为 架设 一 个 网 站 ， 你 需要 为 网 站 产生 的 流量 付费 。 如 果 网 站 的 数据 量 过 大 ,那么 你 应 该 对 任 
何 可 以 减 小 网 站 体积 的 手段 感 兴趣 。 


用 CSS 实现 的 标准 化 的 网 页 设计 ， 那些 关于 网 站 外 观 的 文件 只 需要 被 用 尸 下 载 一 次 ， 
而 且 所 有 页 面 春 是 共用 同样 的 文件 ， 这 样 可 以 改善 网 站 的 性 能 ， 同 时 节省 费用 。 








要 有 目的 地 使 用 HTML 标签 来 表述 标签 标记 的 内 容 。 页 面 有 标题 、 段 落 、 列 表 和 其 他 元 素 ，; 
相应 的 ，HTML 中 设计 了 各 式 标 签 来 标记 不 同 的 内 容 。 以 标题 为 例 ， 可 用 <h1l>About Us</h1> 之 
类 的 标签 来 标记 它 。HTML 解释 如 能 读 懂 这 个 标签 ， 知 道 它 标记 的 古 页 面 上 最 重要 的 一 个 标题 。 


O 屏幕 阅读 絮 古 一 种 软件 ， 用 来 将 文字 、 图 形 以 及 机 器 界面 的 其 他 部 分 转换 成 语音 。 译 者 注 





94 > 第 9 章 用 HTML 做 出 主页 


但 是 ， 用 <fontsize="+2">About Us</font> 这 种 标签 来 标记 标题 则 是 极 不 恰当 的 。 然 而 很 
多 程序 员 恰 恰 就 是 这 样 做 的 ，, 因为 他 们 不 喜欢 <h1> 标 签 会 在 被 标记 的 文字 上 面 加 上 一 个 间距 ,并 
日 会 在 标签 被 呈现 的 时 候 上 自动 换行 。” 

其 实 ， 用 CSS 就 可 以 解决 这 些 视觉 上 的 问题 ， 前 提 是 你 将 这 些 东 西 背 后 的 原理 弄 清楚 。 具 体 
说 来 你 可 以 做 的 有 : 用 CSS 来 改变 所 有 标题 的 样式 ， 或 是 针对 菏 一 页 上 的 菜 个 特定 的 标题 来 做 出 
演示 变动 。 更 邻 人 欣喜 的 是 ， 一 个 CSS 文 件 可 以 对 应 多 个 页 面 ， 这 只 需要 像 一 个 CSS 文 件 里 加 入 
儿 行 代码 就 好 了 ， 而 不 需要 你 手动 去 修改 100 个 页 面 上 的 所 有 标题 。 


9.4 主页 的 框架 








打开 你 最 第 用 的 文本 编辑 融 "“， 新 建 一 个 文件 ， 然后 将 这 个 空 文件 保存 成 mdex.html。 这 个 文 
件 将 会 是 我 们 网 站 的 主页 ,网 站 服务 如 如 末 收 到 一 个 不 币 任 何 特 殊 页 和 面 指 癌 的 请 求 , 就 会 返回 这 
ARH. 


9.4.1 doctype 


每 一 个 HTML 页 面 都 需要 指定 一 种 doctype ， 这 样 ， 验 证 工具 才能 判定 页 面 中 的 标签 是 否 
BHE., mH, 保证 页 面 合法 是 非 第 重要 的 ,在 开始 写 CSS 和 JavaScript 之 前 就 需要 确定 合法 
性 的 问题 。 因 为 不 合法 的 标签 会 叶 致 CSS 的 呈现 错误 ,或 者 是 让 JavaScript 发 生 严 重 的 问题 。 你 
的 放 览 颖 也 需要 有 一 个 完好 的 页 面 来 加 载 样式 和 动作 , 所 以 一 个 未 闭合 的 标签 可 能 会 导致 浏 贤 絮 
LH FE o 

更 重要 的 是 ，doctype H ARREN E LADERA AT. 例如，IE6 会 以 一 种 施 异 
的 模 却 容 多 ,不 严格 合法 的 标签 ， 让 你 不 得 不 抓 痢 脑袋 痛 吉 地 调试 页 面 ,让 它 可 以 在 那些 严格 章 守 
TULA AI a AF BES. PRAT LAR doctype 声明 来 强制 TE6 LAA A TEREN 
页 面 。 虽 然 效 采 还 是 不 太 尽 人意， 但 站 也 知 强 可 用 。 

你 可 以 从 几 种 不 同 的 doctype 选择 一 种 ， 选 用 的 类 型 决定 了 你 在 页 面 上 能 使 用 哪些 标签 ， 同 


时 也 决定 了 检验 页 面 上 标签 是 否 合法 的 衡量 标准 。 最 稍 见 的 两 种 doctype 是 XHTML 1.0 
Transitional 和 HTML 4.01 Strict, 





© 有 些 所 见 即 所 得 模式 的 HTML 编辑 器 都 是 这 样 写 的 代码 ， 所 以 这 并 不 是 只 有 初学 者 会 犯 的 错误 。 
© 推荐 Windows 用 户 使 用 Notepad++, Mac 用 户 使 用 TextMate, 
© Document Type (文档 类 型 ) 的 简写 。 aE 
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默认 页 面 的 名 字 


在 网 站 服务 器 中 有 一 个 概念 叫做 默认 页 面 。 当 发 送 到 服务 器 的 请 求 没有 指定 任何 目录 下 
的 页 面 时 ,默认 页 面 就 会 被 传送 给 用 户 。 在 服务 器 里 ,文件 以 目录 结构 组 织 起 来 ， ee 
存放 在 不 同 的 文件 夹 之 中 。URL (Universal Resource Locator, 统一 资源 定位 符 ) 中 则 包含 
用 户 所 请 求 的 文件 或 者 页 面 TAGE. 例如 你 发 出 了 对 
superwidget/about.html 的 URL 请 求 ， 位 于 http://www.foo.com 的 服务 器 会 在 products/ 
superwidget 文件 夹 里 搜寻 一 个 叫 about.html 的 文件 。 

但 是 ， 如 果 你 请 求 的 URL 是 这 样 的 : http://www.foo. a nok 这 就 是 
一 个 不 完整 的 源 ， 那 么 服务 器 就 得 先 形 清楚 这 条 URL 4 。 首 先 ， 服 务 器 会 先 看 看 这 个 
地 址 到 底 是 个 什么 东西 。 如 果 发 现 这 里 是 个 文件 夹 ， ae ere 机 和 
默认 页 面 文件 名 列表 对 比 ,查看 文件 夹 里 的 文件 名 是 否 出 现在 这 个 列表 中 。 常 见 的 默认 文件 
名 有 index.html, index.htm 和 default.htm , 

要 是 服务 器 没有 找到 默认 文件 , 那么 它 可 能 会 返回 一 个 目录 列表 。 如 果 管 理 员 配置 了 服 
务 器 设置 ,禁止 了 目录 列表 显示 , 那么 就 会 返回 错误 信息 。 很 多 管理 员 认 为 这 样 做 可 能 增强 
网 站 的 安全 性 , 我 却 觉得 PET RETA 如 果 有 东西 是 你 不 布 望 别 人 看 
到 的 ， 那 么 别 把 它 放 到 网 上 。 

想 要 链接 一 个 有 默认 页 的 资源 ， 要 人 么 在 URL 里 写 上 文件 的 名 字 ， 要 么 在 URL 中 文件 
夹 的 最 后 加 上 斜 杠 。 用 这 种 默认 的 URL, 就 相当 于 告知 服务 器 你 实际 上 在 请 求 一 个 文件 夹 ， 
并 且 荐 望 服务 器 能 返回 这 个 文件 夹 里 的 默认 页 。 默 认 URL 最 适合 用 在 页 面 首页 上 。 

为 了 效率 最 大 化 和 避免 混 消 ， 你 应 该 链接 完整 的 资源 信息 。Foodbox 的 首页 链接 就 应 该 
总 是 以 index.html 结尾 。 这 样 ， 服 务 器 就 只 返回 这 个 文件 ， 并 且 紧 接着 就 能 处 理 下 一 条 请 来 
ae 


1. XHTML 1.0 Transitional 


XHTML 1.0 Transitional 在 很 长 时 间 都 被 认为 是 做 网 页 的 正 途 ， 其 中 一 个 主要 的 原因 就 是 这 
种 doctype ee 虽然 这 个 问题 在 今天 看 来 已 经 不 再 是 个 问题 了 ,但 是 
XHTML 仍然 有 不 少 优 于 普通 HTML 的 地 方 。XTHML 更 加 严格 ， 这 让 开发 者 更 多 的 思考 关于 页 
面 结构 的 东西 。 同 时 ， 它 还 规定 了 标签 中 只 能 用 小 写字 母 ， 这 对 解析 页 面 有 利 。 并 且 ，XHTMEL 
还 要 求 每 一 个 标签 都 有 一 个 相应 的 闭合 标签 。 


然而 一 些 跟 麟 览 细 有 关 的 问题 给 这 些 优点 带 来 了 一 些 阴 影 ， 比 如 扩展 性 。 在 下 中， 如 果 把 
content type 设置 为 appliction/xhtml+xm1， 它 是 无 法 正确 处 理 XHTML 的 。 只 有 把 content type 
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设置 成 text/html HJAR, IE Riy XHTML, MEHE XHTML 当成 HTML 来 解析 的 。 显 然 
把 contenttype 设 置 成 前 者 要 合理 一 些 。 在 正之 中 将 doctype 设 置 成 后 者 后 ,本 来 是 等 待 解析 HIML 
的 浏览 右 得 到 却 是 XHTML 标签 ， 这 让 神 览 器 不 得 不 做 一 些 转换 工作 。 这样 你 就 会 失去 原本 属 
F XHTML HIR, FP EL CEPR DE ae ASSAY A] UIA SECO IA. GANA AH div, span 
标签 在 XHTML HETARA HMA, (Ave 4 al) bt a 4 HTML 解析 时 ， 自 闭合 标签 中 的 
后 置 斜 杠 被 拿 反 了 ， 留 下 一 个 没有 闭合 标签 的 dv， 打 乱 了 这 个 标签 之 后 所 有 的 结构 。” 


这 些 问题 驱使 一 些 设 计 师 和 开发 人 员 回 到 了 普通 HTML 的 怀抱 ， 他 们 通常 遵循 HTML 4.01 
Strict? 或 是 HTML 5 标准 。 








2. HTML 4.01 Strict 


我 们 会 用 HTML 4.01 Strict 来 写本 书 的 例子 。 在 HTML 4.01 Strict H, sox bre AIC 
的 , 但 是 大 小 写 不 再 是 问 题 ， 一 些 标 丛 页 不 需要 被 朵 合 ,同时 目 朵 合 标签 是 不 被 允许 的 。 注 意 ， 
这 些 只 是 语句 本 壬 的 一 些 差异 , 并 不 古 说 HTML 在 句法 上 要 优 于 或 者 逊 于 XHIML。 只 要 你 注 
E SSCA GE VEM HE, Drea. FP de, CSS 或 是 JavaScript 什么 的 都 不 会 是 


问题 。 


虽然 这 里 只 会 用 到 HIML 4.01 Strict， 但 我 仍然 会 强调 写 出 结构 民 好 、 合 法 且 有 语义 的 标签 。 
这 样 可 以 确保 以 后 转换 到 XHTML 1.0 Strict 或 者 HTML 5 的 时 候 不 会 有 什么 障碍 。 记 住 ， 不 管 你 
最 后 使 用 了 什么 样 的 doctype, 最 终 训 览 部 所 面 对 的 总 会 是 HTML, 所 以 这 两 种 doctype 只 是 在 句 
法 上 有 些 区 别 。 大 可 不 必 在 这 个 问题 上 太 过 纠结 。 








3. 添加 doctype 
在 文档 中 置 入 如 下 的 doctype 声明 。 文 档 中 所 有 的 其 他 内 容 都 应 该 写 在 这 句 声 明之 后 。 


homepage_html/index.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //ww.w3.org/TR/htm]4/strict.dtd"> 


PEPHER EMREHAN FRATRER HE, HB CAL Ue ce aE BE AT FY 
模板 ， 或 者 你 可 以 用 搜索 5| 擎 搜索 “HTML 4.01 Strict doctype” 这 几 个 关键 字 来 得 到 一 个 样本 。 











®© http://xhtml.com/en/xhtml/serving-xhtml-as-html/, 

®© http:/www.webdevout.net/articles/beware-of-xhtml#myths 上 有 很 多 非常 好 的 示例 ， 说 明了 content type 如 何 呈 现 以 
XHTML 编写 的 网 页 。 

© http://mezzoblue.com/archives/2009/04/20/switched/, 
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9.4.2 html 标签 


一 个 网 页 其 实 和 XML 文档 类 似 ， 是 一 种 层次 化 的 元 素 合 集 。 其 中 htm 元 素 是 文档 中 的 根 
元 素 ， 所 有 其 他 的 元 素 都 是 它 的 子 元 素 。 儿 乎 所 有 htm 元 素 都 由 一 个 开始 标签 和 一 个 闭合 标签 
组 成 ， 它 们 标记 了 这 个 元 素 的 苑 围 。 你 可 以 将 开始 标签 和 闭合 标签 想象 成 Java PAGES. 


紧 接 着 doctype 声明 之 后 ， 写 上 htm 标签 ， 别 忘记 要 把 闭合 标签 也 写 上 。 时 刻 记 着 闭合 标 
签 是 刚 开始 做 网 页 开发 时 候 需 要 养 成 的 好 习惯 。 写 一 个 标签 ， 马上 再 加 上 它 的 闭合 标签 ， 最 后 再 
把 光标 移动 到 两 个 标签 之 则 添加 内 容 。 忘记 闭合 标签 会 造成 标签 不 合法 ,进而 导致 放 览 器 会 胡乱 
解析 页 面 样式 。 不 合法 的 标签 还 会 引起 其 他 开发 者 的 不 满 (他 们 会 因此 而 接 你 一 顿 也 说 不 定 )。 
你 要 尽 可 能 避免 这 种 事情 的 发 生 。 


homepage_html/index.html 








<html lTang="en"> 


</html> 


W 小 乔 爱 问 …… 
J XHTML 走 到 尽头 了 吗 


W3C 今 日 决定 停止 下 一 代 XHTML 的 开发 ， 集 中 资源 主攻 HIML 5”。 但 是 这 并 不 意味 
着 XHTML 1.0 走 到 了 尽头 。 这 只 说 明 表 示 如 果 是 做 网 页 标签 ，HTML 5 是 正确 的 选择 。 


多 数 程序 员 和 标准 化 支持 者 偏爱 XHTML 的 原因 是 , 它 更 严格 : 所 有 的 标签 必须 有 闭合 
标签 ， 所 有 的 标签 和 它们 的 属性 都 需要 用 小 写字 母 书写 ,属性 的 值 必 须要 用 引号 标记 ， 并且 
独立 标签 如 br、img、meta 和 hr 标签 中 需要 有 后 置 久 杠 。 除 了 自 闭合 标签 之 外 ， 以 上 所 有 
的 特性 在 HTML 4.01 Strict 都 是 合法 的 ; 在 HTML 5 中 你 则 可 以 用 到 上 述 所 有 特性 


ua 


XHTML 的 研发 终止 了 ， 所 以 我 们 可 以 说 它 跟 COBOL 的 死 法 一 样 它 还 能 用 ， 只 是 
停滞 不 前 了 。 所 以 没有 必要 和 急 和 急忙 忙 把 你 现在 所 有 的 页 面 都 变 成 HTML 4.01 Strict， 但 是 当 
开发 一 个 新 网 站 的 时 候 ， 你 就 需要 综合 考虑 一 下 所 有 选择 了 。 





9.4.3 属性 


每 个 标签 部 有 各 目的 不 同属 性 , 在 标签 声明 中 可 以 指定 茶 些 属性 , 这 些 属性 让 标签 的 定义 更 








@ http://www.w3.org/News/2009#item119 , 
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加 具体 。html 标签 就 有 个 用 来 表述 文档 语言 的 属性 。 


_ 自 闭合 标签 


do BARRA XML， 关 于 自 闭合 标签 的 概念 你 不 会 陌生 。 它 们 就 是 那些 有 后 置 久 杠 的 标 
签 、HTML 4.01 Strict 不 支持 这 种 特性 ， 但 是 XHTML 1.0 Strict 和 Transitional, HTML 5 都 支 


ar 上 


> 
U o 


9.4.4 head 和 body 标 签 


在 html 标 釜 中 总 是 会 发 现 这 两 个 元 系 的 里 影 : head 和 body, head 标签 包括 了 所 有 的 元 数 
据 (metadata), recone ar PSS ALS ek HERE PS MS SCF, JavaScript 文件 的 链接 ， 样 式 文件 
和 其 他 有 用 信息 。body 元 素 包 含 的 内 容 将 出 现在 网 页 中 。 

KRA html 之 后 ， 在 你 的 文档 中 加 上 head 标签 ， 别 总 了 闭合 标签 。 


homepage_html/index.html 





<head> 


</head> 
就 像 写 程序 一 样 ， 对 HTML 代码 做 适当 的 缩 进 也 是 很 有 必要 的 。 特 别 是 当 你 的 文件 很 大 时 ， 
缩 进 在 开发 后 期 会 起 大 作用 。 


在 head 元 素 中 加 上 以 下 内 容 : 


homepage_html/index.html 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Foodbox</title> 


9.4.5 ”没有 闭合 标签 的 标签 
HTML 中 有 些 标签 是 没有 范围 的 ,因为 这 些 标签 既 不 包含 任何 内 容 ， 又 不 会 对 页 面 内 容 产 生 
影响 。 因 此 ， 这 类 标签 本 身 常 常 被 看 作 是 页 面 的 内 容 。 


具体 说 来 ，img 标 答 就 是 个 例子 ， 它 用 来 癌 页 面 中 插入 图 片 ， 另外 还 有 br 标签 ， 用 来 换行 ， 
还 有 hr 标签 ， 它 征 一 条 水 平分 割 线 。 
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V/ 小 乔 爱问 ……. 
YU “不 是 应 该 在 HTTP 首部 中 设置 内 容 文字 和 编码 方式 吗 
正确 设置 HTTP 首部 是 很 重要 的 ， 但 是 有 些 浏览 器 和 验证 器 是 以 meta 标签 中 的 内 容 为 
准 的 。 在 页 面 源 中 使 用 meta 标签 能 够 更 好 地 描述 网 页 ， 并 且 能 让 其 他 开发 者 更 清楚 地 了 解 
你 的 意图 。 
最 重要 的 是 ，meta 标签 能 够 在 本 地 开发 和 检测 HTML 文件 ， 从 自己 硬盘 打开 的 文件 可 
以 按照 设 定 的 编码 正确 呈现 。 
当 你 在 服务 器 上 部 署 HTML 文件 的 时 候 ， 要 注意 保持 meta 标签 中 的 编码 设置 同 
Content-Type 首部 的 编码 设置 是 一 致 的 。 


meta 标签 是 一 个 内 容 元 素 , 用 以 让 我 们 以 元 数据 的 形式 描述 文档 。 在 个 例子 里 , 我 们 用 meta 
标签 告诉 剖 览 莫 和 解释 全 页 面 内 容 的 编码 方式 。 有 时 ， 你 会 从 其 他 来 源 复 制 一 些 内 容 粘贴 到 文档 
中 , 这 些 被 粘贴 过 来 的 内 容 可 能 包 售 了 部 分 训 览 侣 和 机 大 无 法 识别 的 文字 符 志 。 指 定 一 种 编码 可 
以 让 HTML YEME a TER AE PT OL Bete EPR o 


meta praih a LAZa i bat. Pao RRRA A EEEL. EE 18 草 中 我 们 会 接 
触 到 更 多 关于 这 个 标签 的 内 容 。 





9.4.6 ”页面 标题 


title 标签 很 重要 。 在 这 个 元 素 内 的 文字 会 显示 在 网 页 浏览 禹 的 标题 栏 上 。 同 时 ， 如 果 网 页 
被 收藏 ， 它 还 将 是 收藏 来 里 这 个 网 页 的 默认 存储 名 。 最 后 ， 大 多 数 搜索 引擎 的 返回 结果 都 会 包含 
页 面 标题 。 在 这 个 例子 中 ,网 站 的 名 字 已 经 够 用 了 , 但 是 在 子 页 面 上 , 注意 给 这 个 元 素 加 上 额外 
的 文字 ， 如 About This Site, Foodbox or Top Recipes、Foodbox。 因 为 这 个 标题 会 出 现在 六 览 絮 标 
题 栏 和 收藏 夹 中 ， 所 以 我 们 希望 网 站 名 字 总 是 在 里 面 。 但 是 ， 这 个 标题 有 被 删 减 的 风险 ， 所 以 我 
们 希望 能 让 某 一 部 分 最 先 显示 。 对 于 用 户 和 搜索 引 敬 来 说 ，Latest Recipes、Food... 这 样 的 标题 看 
上 去 要 比 Foodbox、Latest Rec... 好 很 多 。 


随 着 产品 接近 尾声 ， 页 面 的 head 区 域 会 包含 更 多 内 容 。 现 在 ， 你 可 以 开始 着 手 创 建 页 面 的 
视觉 内 容 了 。 在 这 个 阶段 ， 还 没有 必要 做 太 多 的 搜索 ?| 擎 方面 或 脚本 编写 的 事情 。 
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块 元 素 和 内 联 元 素 

body 标签 中 的 元 率 不 是 属于 块 元 素 , 就 是 属于 内 联 元 素 。 了 解 这 两 种 元 素 的 区 别 能 够 让 
你 在 写 CSS 页 面 样式 的 时 候 市 约 不 少时 间 。 

一 般 说 来 ， 块 元 素 要 另 起 一 行 才能 开始 , 如 div、h1、h2、h3、p、ul、11、table 和 form, 

反 过 来 , 内 联 元 素 则 是 跟 其 他 元 素 在 同一 行内 被 呈现 的 , 它 包括 的 标签 有 a, b, i, span, 
em, strong, label, select, input, textarea, u #7 br, 

你 需要 牢记 的 是 : 块 元 素 可 以 包含 其 他 的 块 元 素 或 者 内 联 元 素 , 而 内 联 元 素 中 则 只 能 包 
含 内 联 元 素 ， 块 元 素 不 能 被 放 在 内 联 元 素 中 。® 


9.4.7 ” body 标签 : BAR 


页 面 内 所 有 的 可 见 内 容 都 坐落 在 body 标签 中 。 


在 文件 中 写 上 body 标签 并 将 之 闭合 ， 在 两 者 之 间 留 出 一 点 空间 写 主体 内 容 。 这 样 ， 我 们 就 
有 了 一 个 标准 的 HIML 4.01 Strict 模 板 了 (参见 图 9-1)。 





homepage_html/index.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //ww.w3.org/TR/htm14/strict.dtd"> 


<html Tang="en"> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Foodbox</title> 
</head> 


<body> 


</body> 
</html> 





9-1 一 个 预 设 的 HTML 模板 


在 92 市 中 ,你 已 经 学 会 了 用 不 同 的 元 素 将 页 面 分 成 不 同 区 域 。 现 在 要 做 的 是 用 代码 将 这 些 
部 分 划分 出 来 ， 这 时 需要 用 到 的 标签 是 div， 它 可 以 起 到 划分 的 作用 。div eA a WAC, 在 


© 在 内 联 元 素 中 的 块 元 素 可 能 会 被 呈现 ， 但 是 整个 页 面 就 变 得 不 合法 了 ， 而 且 这 会 给 样式 表 的 应 用 和 写 JavaScript 
的 工作 带 来 问题 。 


94 主页 的 框架 d 101 


页 面 呈 现 的 时 候 不 会 占据 页 面 空 间 。 但 是 它 也 有 比较 重要 的 特性 。 首 先 记 住 它 是 个 块 元 素 ， 这 意 
味 着 它 会 另 起 一 行 。 接 下 来 你 会 见 到 关于 块 元 素 的 更 详尽 解释 。 


先 建立 一 个 顶层 的 区 域 ， 然 后 可 以 用 这 个 区 域 来 包 衷 住 页 面 上 的 所 有 内 容 ， 侧 边栏 、 页 头 、 
页 脚 等 都 会 放置 在 这 个 区 域 中 。 而 且 ， 我 们 还 可 以 利用 这 个 区 域 保 证 900 像素 的 宽度 。 稍 后 ， 这 
个 区 域 还 将 充当 其 他 所 有 元 素 的 参考 位 置 。 好 的 程序 员 都 会 为 程序 写 注释 , HTML 也 提供 了 注释 
功能 。 在 body 的 开始 标签 后 加 上 以 下 代码 : 


homepage_html/index.html 





<div id="page"> <!-- start of the page wrapper --> 


</div> <!-- end of the page wrapper --> 


RE m Be EVA FOR EU Oe A DS BEE ESD E. TER, id 这 个 属性 在 整 
eee 的 ,也 就 是 谤 在 一 个 页 面 上 只 月 有 一 个 id 是 page 的 区 域 。 如 条 超出 一 个 ,页 
面 将 通 不 过 验证 ， 同 时 样式 方面 还 会 出 现 诡 异 的 回 题 。 


MERNE, HTML 文件 会 变 得 元 长 ， 且 不 多 阅读， 上 面 写 的 注释 可 能 在 以 后 会 有 帮助 。 
2. 四 个 内 容 区 域 
用 div 元 泰 划 分 出 页 尖 、 页 脚 、 侧 边栏 和 页 面 主要 区 域 : 


homepage_html/index.html 


<div id="header"> <!-- start of header --> 

</div> <!-- end of header --> 

<div id="middle"> <!-- container for the sidebar and main region --> 
<div id="sidebar"> <!-- the sidebar --> 
</div> <!-- end of the sidebar --> 
<div id="main"> <!-- start of main content --> 
</div> <!-- end of main content --> 

</div> <!-- end of middle container --> 

<div id="footer"> <!-- start of the footer --> 

</div> <!-- end of the footer --> 

</div> <!-- end of the page wrapper --> 
</body> 


</html> 


102 > 第 9 章 用 HTML 做 出 主页 


示例 代码 中 有 一 个 新 加 的 区 域 叫做 middle。 通 第 ， 每 当 在 页 面 上 有 两 个 区 域 需要 并 排 显 示 
的 时 候 ， 你 都 需要 用 男 外 的 一 个 区 域 将 它们 包 于 起 来 。 这 样 可 以 在 不 添加 太 多 标签 的 情况 下 , te 
供 更 大 的 灵活 性 ， 因 为 你 可 以 只 对 最 外 层 的 那个 区 域 做 样式 调整 。 在 上 和 面 ,将 侧 边 栏 和 主要 区 域 
FAA at SE, WR A ae EE PA E. 


现在 结构 搭 好 了 ， 可 以 添加 内 容 了 。 





默认 文字 

图 片 标签 的 alt (alternative 的 前 三 个 字母 ) 属性 提供 了 一 种 改善 可 用 性 和 可 访问 性 的 
简单 方法 。 当 图 片 无 法 显示 的 时 候 ， 默 认 文 字 (alternative text) 就 会 填补 空缺 。 育 人 其 实 
就 是 靠 这 些 文字 来 了 解 页 面 上 的 图 片 内 容 的 ， 所 以 应 该 尽量 让 默认 文字 表述 得 清晰 详细 。 
一 辆 蓝 色 的 汽车 ”就 不 如 “一 辆 1957 年 的 复 十 雪佛兰 汽车 停 在 市 中 心 的 商场 门口 ”来 的 
详细 。 

默认 文字 也 是 基于 文字 的 浏览 器 和 低 带 宽 手 机 用 户 的 福音 。 另 外， 搜索 引 掌 也 利用 这 些 
文字 来 查询 网 页 ,这 也 是 需要 重视 默认 文字 质量 的 一 个 原因 。 搜 索引 掌 无 法 读 图 ,默认 文字 
就 显得 尤为 重要 。 在 16.2 市 中 ,我 会 讲 到 更 多 的 相关 内 容 。 


95 Tis 


页 类 部 分 只 包括 Foodbox 的 Logo， 我 们 会 用 img 标签 来 添加 这 个 图 片 。img 标签 有 属性 用 
来 指定 图 片 的 路 径 ， 类 似 于 a 标签 中 的 href 属性 。 这 个 属性 的 值 可 以 是 个 URL， 也 可 以 是 图 片 
文件 的 相对 路 径 。 我 们 会 在 9.6 节 中 详细 讨论 关于 URL 的 问题 。 


往 页 面 上 放 阜 图片 的 时 候 , 最 好 能 指定 它 的 长 和 宽 。 虽然 现在 我 们 还 没准 备 好 图 片 ， 长 和 宽 
可 能 都 得 空 着 , 但 是 过 会 儿 还 是 要 加 上 有 的 。 现 在 ,还 古 先 给 图 片 指定 源 和 alt 文字 属性 。 默 认 文 
字 可 以 在 图 片 不 能 加 载 的 时 修 显 示 ， 同 时 也 为 使 用 屏 磋 阅读 各 的 用 户 提 供 极 大 的 方便 。 


把 鼠标 光标 移 到 id 为 header 的 div 标签 之 后 ,插入 如 下 代码 : 








homepage_html/index.html 


<img src="images/banner.png" alt="'Foodbox"> 


保存 文件 ， 页 头 部 分 暂时 就 做 好 了 了， 我 们 继续 接 下 来 的 部 分 。 


96 Mme 


侧 边 栏 区 域 中 内 容 不 少 , LTR S/S I, 7ST SE ZS — RAE. RIK 
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会 把 这 些 部 分 安置 在 它们 各 上 自 的 容 姻 内 , 便于 以 后 调整 它们 的 位 置 。 好 了 ， 让 我 们 开始 写 HTML 
表单 吧 。 


9.6.1 搜索 表单 


HTML 中 的 表单 很 简单 ， 难 的 部 分 古 表 单 和 后 台 系 统 的 交互 。Foodbox 的 搜索 表单 由 两 个 元 
素 构成 : 关键 字 字 段 和 提交 按钮 .另外 ,一 个 比较 难 的 部 分 是 HTML 表单 需要 将 数据 提交 到 URL, 
创建 表单 的 过 程 中 ， 这 个 目标 URL 和 服务 如 端 处 理 数 据 的 代码 都 症 必 不 可 少 的 。 


还 好 ， 原 有 的 Foodbox 页 面 上 已 经 有 了 这 些 信息 ， 我 们 只 要 扫 一 眼 就 能 发 现下 和 面 的 代码 : 


<form method="get" action="/recipes/"> 
<input type="text” name="keywords"> 
<input type="submit" value="search"> 
</form> 


这 段 代 码 显 示 ， 提 交 表 单 的 时 候 会 用 GET 方法 将 数据 传送 到 recipes。 同 时 我 们 还 知道 这 
个 表单 叫做 keywords。 这 差不多 能 让 我 们 继续 下 去 ， 只 是 有 几 个 小 问题 需要 解决 。 

首先 input 标签 设 有 闭合 。 可 能 原来 那些 开发 者 忘记 ， 或 者 他 们 用 的 HTML 版 本 并 不 要 求 
标签 闭合 ， 但 是 我 们 制定 的 doctype 是 需要 的 。 当 然 ， 这 个 问题 很 好 解决 。 

第 二 个 问题 是 两 个 input 标签 都 需要 一 个 id 属性 , 这 会 在 添加 样式 的 时 候 帮 上 大 忙 。 最 后 ， 
我 们 要 把 提交 按钮 换 成 一 个 放大 和 镜 的 样子 。 

除了 表单 之 外 ， 搜 索 区 域 还 需要 一 个 标题 ， 叫 做 Search Result, 














标题 

在 页 面 上 添加 文字 很 简单 ,只 需要 往 指 定 区 域 打 字 就 好 了 。 但 是 你 需要 进一步 考虑 文学 
被 呈现 的 效果 。 

在 HTML 中 有 好 几 种 标签 是 用 来 标记 文字 的 。 实 际 上 ， 光 是 跟 标 题 有 关 的 就 有 6 个 ， 
分 别 是 hl、h2、h3、h4、h5 和 h6。 其 中 数字 越 小 ， 代 表 这 个 标签 中 的 内 容 越 重要 。 


一 个 网 页 至 少 要 有 一 个 用 hl 标记 的 大 标题 。 搜 索引 萤 会 根据 这 些 标题 来 确定 页 面 企 搜 
索 结 果 中 的 权重 。 我 们 会 在 页 面 的 主要 区 域 用 到 大 标题 ， 其 他 区 域 则 会 用 到 h2 标签 。 


在 侧 边 栏 中 加 入 如 下 代码 来 构建 搜索 区 域 : 


homepage_html/index.html 


<div id="search"> 
<h2 id="search_header">Search Recipes</h2> 
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<form id="search_form" method="get" action="/recipes/"> 

<div> 
<input type="text" id="search_keywords" name="keywords"> 
<input type="image" alt="Search" src="images/search.png'"> 


</div> 
</form> 
</div> 


分 析 一 下 上 面 的 代码 。 侧 边栏 的 搜索 区 域 被 独立 包 于 在 自己 的 区 域 中 ， 有 自己 的 id， 这 样 
以 后 添加 样式 的 时 候 ， 你 会 有 更 多 的 灵活 性 。 搜 索 表 单 重 组 了 原来 页 面 上 的 表单 ， 新 增 了 id, 
同样 这 个 id 也 是 为 了 方便 添加 样式 和 JavaScript 动作 。 

这 里 用 一 个 div 将 输入 区 域 装载 起 来 。 在 HTML 4.01 Strict 中 ， 输 入 标签 必须 被 放置 在 div 
或 者 其 他 块 元 素 中 ， 如 标题 标签 或 者 段落 标签 。 

最 大 的 变化 是 ， 提 交接 钮 不 见 了 ， 我 们 用 了 一 个 图 片 按钮 来 代 砍 它 。 

图 片 按 钮 跟 普 通 的 按钮 作用 一 样 ， 当 用 户 单 击 它 时 ,数据 会 被 表单 传送 到 相应 的 URL。 区 别 
在 于 ， 你 可 以 用 心仪 的 图 片 来 赫 换 原本 只 跟 操 作 系 统 相关 的 无 聊 的 默认 按钮 样式 。” 





以 ,但 这 不 是 个 好 点 子 。 链 接 意味 着 获取 信息 ， 而 按钮 意味 着 发 出 消息 。 违 背 这 个 标 


可 
准 会 造成 一 些 不 必要 的 可 用 性 方面 的 麻烦 。 

如 果 要 用 链接 来 提交 表单 ， 就 不 得 不 用 到 JavaScript 
JavaScript 来 提交 表单 。 我 不 推荐 这 种 做 法 ， 它 不 是 个 好 点 子 ， 所 以 我 也 不 会 教 你 怎么 做 。 
最 直接 的 原因 是 ， 这 样 做 会 让 那些 不 支持 JavaScript HRP RLEA ND. 

当然 ， 总 有 些 人 会 声称 这 样 做 是 合理 的 ， 他 们 的 原因 总 离 不 开 某 种 视觉 效果 。 但 是 ， 图 
片 状 的 按钮 已 经 大 大 增强 了 表单 的 美观 了 。 当 然 你 也 可 以 利用 CSS 来 让 按钮 看 起 来 像 链接 。 





需要 让 链接 去 调用 一 个 


9.6.2 菜谱 标签 云 
通常 情况 下 , 标签 云 的 功能 是 在 服务 器 端 实现 的 , 在 那里 会 有 某 种 机 制 从 数据 库 里 查询 出 最 
常用 的 标签 。 获 取 这 些 标签 后 ， 用 HTML 代码 在 页 面 上 显示 ， 然 后 通常 用 CSS 来 控制 标签 的 样 





@ 表单 中 的 很 多 东西 , 如 单 选 或 多 选 框 、 下 拉 菜 单 和 按钮 的 样式 都 是 由 操作 系统 决定 的 , 而 且 古 没有 办 法 上 自 定义 的 。 
所 以 设计 网 站 的 时 候 ， 一 定 要 在 不 同 的 操作 系统 上 测试 你 的 设计 。 
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式 , 使 它们 的 样式 跟 各 自 的 流行 程度 相 匹 瑟 。 因 为 这 是 一 本 讲 设计 的 书 ， 所 以 那些 服务 器 端的 实 
现 过 程 就 不 说 了 了， 我 们 还 是 专注 于 标签 云 的 实现 吧 ， 这 样 你 可 以 学 到 怎么 为 它们 加 上 样式 。 

我 已 经 说 过 , 云 中 标签 的 样式 跟 它 们 的 流行 程度 有 关 。 如 果 有 很 多 菜谱 都 被 打上 了 某 一 个 标 
Z, 那么 可 能 需要 我 们 给 它 一 个 大 一 点 的 样式 ; 那些 受 欢 迎 程度 差 一 点 的 标签 的 大 小 就 相对 小 一 
些 。 为 了 人 简单 起 见 ， 我 们 的 标签 云 里 有 5 个 级 别 标签 。 其 中 使 用 次 数 最 多 的 标签 用 级 别 1， 最 少 
的 那些 标签 用 级 别 5。 

每 个 标签 都 是 一 个 链接 , 链接 到 显示 所 有 拥有 这 个 标签 的 菜谱 的 页 面 。 但 是 如 何 为 这 些 标 签 
加 上 样式 呢 ? 因为 我 们 需要 复 用 标签 们 的 样式 ， 所 以 这 是 个 运用 class 属性 的 好 机 会 。 跟 id 属 
性 一 样 ，class 属性 也 是 HTML 文档 中 所 有 元 素 都 可 以 有 的 。 

链接 是 用 a 标签 (anchor 标签 ) 来 定义 的 。 你 可 以 链接 到 同一 个 服务 器 上 的 其 他 文档 ， 或 
者 其 他 服务 器 上 的 其 他 文档 ， 甚 至 是 本 页 面 的 基 一 个 部 位 ， 只 要 把 a 标签 中 的 href 属性 值 设置 
为 你 要 链接 到 的 URL 就 可 以 了 。 在 开启 和 闭合 标签 之 间 的 文字 ， 称 为 超 链 接 。 我 们 来 看 看 几 种 
不 同 的 超 链接 。 

1. 绝对 超 链接 

绝对 超 链接 包含 了 链接 源 的 完整 地 址 ， 包 括 协 议 、 服 务 器 名 和 链接 源 在 服务 器 上 的 地 址 : 


<a href="http://ww.google.com/">Google</a> 
2. 相对 链接 
一 个 相对 于 当前 路 径 的 链接 。 你 可 以 用 相对 链接 定位 到 本 目 永 下 的 子 文件 夹 中 的 一 个 文件 : 


<a href="about/index.htm]">About Us</a> 

也 可 以 定位 到 本 目录 的 父 目录 中 的 一 个 文件 : 

<a href="../index.html">Back to the home page</a> 

还 可 以 定位 到 跟 网 站 根 日 录 下 的 文件 : 

<a href="/index.html">Back to the home page</a> 

你 猜 对 了 ， 这 很 像 Linux X ABSENCE DI E 

3. fa 

(rie AT LARERE A R MEREN, {Ae EEE LE LA A A: 


<a name="ingredients'"></a> 
<hl>Ingredients</h1> 














]] > 
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然后 你 就 可 以 创建 一 个 能 够 跳 转 到 这 个 部 分 的 链接 : 


<a href="#ingredients">Ingredients</a> 


]] > 
你 也 可 以 将 销 点 附 在 任何 绝对 或 者 相对 URL 的 后 面 , 把 你 的 用 户 带 到 某 个 页 面 的 某 个 位 置 : 
<a href="http://www.yourfoodbox.com/recipes/55#ingredients">Ingredients</a> 
销 点 在 那些 内 容 丰 富 的 长 页 面 上 极为 有 用 , 你 可 以 用 销 点 来 为 这 个 页 面 建 一 个 日 好 (table of 
contents，TOC)， 让 用 户 可 以 跳 到 他 们 想 要 去 看 的 内 容 。 同 样 ， 你 还 能 在 每 一 部 分 结束 的 时 候 放 
置 一 个 回 到 目 孙 的 链接 ， 这 样 用 户 就 不 用 自己 滚动 页 面 而 回 到 目 孙 了 。 


因为 现在 我 们 还 处 于 制作 演示 页 的 阶段 ， 虽 然 你 可 以 把 每 个 云 里 的 标签 都 加 上 URL， 但 是 
这 样 显然 太 浪 费时 间 了 ,而 且 到 最 后 你 还 是 要 用 程序 来 生成 这 些 链 接 的 。 所 以 就 目前 来 讲 , 你 可 
以 制作 单 击 后 不 跳 转 到 任何 地 方 的 链接 一 一 只 需要 在 需要 链接 的 文件 或 地 址 属性 后 面 写 上 “# 
就 可 以 了 ; 这 也 是 检查 被 点 过 的 链接 的 好 方法 。 你 可 以 将 这 个 技巧 当做 “链接 火 火 ”运动 。 


现在 可 以 开始 创建 侧 边 栏 中 的 第 一 个 标签 去 了: 


homepage_html/index.html 














<div id="browse_recipes'> 
<h2 id="browse_recipes_ header">Browse Recipes</h2> 
<a Class="level_1" href="#4">desserts</a> 
<a Class="level_4" href="#">appetizers</a> 
<a Class="level_5" href="#">indian</a> 
<a Class="level_ 2" href="#">beef</a> 
<a Class="level_5" href="#">entrees</a> 
<a Class="level_ 4" href="#">mexican</a> 
<a Class="level_3" href="#">seafood</a> 
<a Class="level_ 4" href="#4">drinks</a> 
<a Class="level_2" href="#">pasta</a> 
<a Class="level_1" href="#4">italian</a> 
<a Class="level_ 2" href="#4">chicken</a> 
<a Class="level_4" href="#">pork</a> 
</div> <!-- end browse_recipes --> 


每 个 超 链 接 都 被 赋值 了 一 个 class 属性 , 在 添加 样式 的 时 候 , 每 一 种 Class a 
字号 。 跟 在 制作 搜索 区 域 的 时 候 一 样 ， 我 们 也 用 一 个 div BRZAKA, H h2 标签 呈现 了 这 
区 域 的 标题 。 


96.3 ”食材 标签 云 


这 个 标签 云 跟 9.6 节 中 的 菜谱 标签 云 类 似 。 只 不 过 需要 改动 一 些 id、 标 题 和 标签 内 容 。 从 已 
经 写 好 的 HTML 复制 代码 不 是 一 件 坏事 。 现 在 你 不 是 在 写 程序 ， 而 是 在 标记 内 容 , 通常 说 的 “ 重 
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复 目 己 是 种 错误 ”这 个 规则 不 适用 ， 你 需要 的 是 尽 快 完成 工作 。 用 正确 的 语义 化 结构 标记 内 容 不 
征 什么 很 激动 人 心 的 工作 。 人 们 关心 的 只 是 最 后 的 外 观 ， 而 不 是 内 在 的 运行 原理 。 


完成 的 新 标签 去 看 起 米 应 该 是 这 样 : 
homepage_html/index.html 


<div id="popular_ingredients"> 
<h2 id="popular_ingredients_header">Popular Ingredients</h2> 
<a Class="level_2" href="#">oregano</a> 
<a Class="level_4" href="#4">garlic</a> 
<a Class="level_3" href="#">black beans</a> 
<a Class="level_3" href="#">apples</a> 
<a Class="level_3" href="#">bananas</a> 
<a Class="level_5" href="#">cheese</a> 
<a Class="level_3" href="#">lettuce</a> 
<a class="level_1" href="#4">chicken</a> 
</div> <!-- end popular_ingredients --> 


跟 来 详 标签 云 一 样 ， 这 个 标签 云 的 区 域内 也 有 目 己 的 标题 和 链接 。 
好 了 ， 侧 亡 栏 做 好 了 ， 你 可 以 保存 文件 ， 然 后 在 训 览 依 里 看 看 效 未 。 


WW/ 小 乔 爱问 
法” 井 号 到 底 是 用 来 干什么 的 


E 代表 的 是 HTML 文档 中 的 位 置 ， 这样 就 可 以 创建 跳 转 到 页 面 内 某 位 置 的 链接 了 ， 
例如 <ahref="index.html#news">News</a> 会 载 入 index A R, 并 跳 到 页 面 内 用 锚 点 <a name= 


"news">News</a> 标 记 的 位 置 。 


现在 在 标签 云 中 , 我 们 在 连接 的 URL 只 用 了 一 个 “# ,浏览 器 会 把 这 个 链接 理解 为 “ 跳 
到 页 面 顶端 "， 基 本 上 等 同 于 什么 也 不 做 ， 


需要 注意 的 是 ， 你 时 常 还 会 看 到 “#” 作 为 一 个 二 位 符 ， 放 在 链接 到 JavaScript 的 a 标 
签 中 一 一 这 种 标签 的 onclick 属性 里 写 的 是 JavaScrip: 


<a href="#" onclick="showAddUserForm(); return false; "> 
Add New User</a> 


这 是 一 个 很 流行 的 解决 万 式 ， 但 是 你 应 孩 尽 可 能 避免 使 用 它 。 那 些 无 法 使 用 JavaScript 的 用 
户 单 击 这 个 链接 后 , 会 真 的 跳 到 页 面 顶端 。 所 以 你 应 该 在 这 里 用 一 个 真正 的 链接 。 在 上 面 那 
个 “add user” 的 例子 里 ， 链 接应 该 跳 转 到 一 个 单独 的 添加 用 户 页 面 。 然 后 再 用 Unobtrusive 
JavaScript 为 单 击 事件 添加 动作 。 
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9.7 主要 内 容 


我 们 的 主要 区 域 里 有 以 下 几 个 部 分 : 一 大 幅 水 平 的 图 片 、 一 列 文字 、 注 册 和 登录 按钮 ， 还 有 
一 个 部 分 用 来 展示 最 新 的 菜谱 。 其 中 的 三 个 部 分 需要 用 到 我 们 做 的 样式 页 里 的 图 片 。 我们 还 没有 
导出 那些 图 片 ， 所 以 可 以 先 放 一 放 ， 就 像 我 们 在 做 搜索 框 边 上 的 图 片 按 钮 时 那样 。 
9.7.1 意大利 面 图 片 

跟 做 Banner 类 似 , 我 们 要 向 img 标签 里 加 一 个 链接 。 然 后 把 这 个 标签 放 在 id 是 <main> 的 那 
对 标签 内 : 


homepage_html/index.html 





<img 1d="main_image" src="Images/pasta.jpg" 
alt="Pasta and marinara sauce''> 


我 们 还 是 假设 有 个 叫做 images WICK, MWEKA html XALA T, HH. images 
文件 夹 中 有 一 张 叫做 pasta.jpg WA. ME., WASH alt 属性 中 的 文字 。 

1. 默认 文字 

为 了 防止 图 片 因 为 某 种 原因 没有 被 加 载 ， 比 如 说 用 户 用 了 屏幕 阅读 器 或 者 文字 版 的 浏览 器 ， 
图 片 元 素 需 要 有 一 段 默认 文字 。alt 属性 就 是 用 来 添加 这 些 文字 的 ， 使 用 这 个 属性 的 时 候 ， 要 广 
意 添加 的 文字 应 该 具有 描述 性 。 虽 然 不 设置 默认 文字 ， 你 也 可 以 通过 验证 ,但 是 这 对 你 的 用 户 设 
好 处 。 记 住 ， 要 用 它 来 描述 图 片 。 

















2. 文字 内 容 

文字 内 容 指 的 是 Get Cookin’s 的 标题 和 那 一 段 文字 。 这 里 的 标题 在 写 CSS 的 时 候 被 图 像 所 取 
代 《〈 甚 他 标题 也 是 一 样 )。<p> 标 签 是 用 来 包 囊 文字 内 容 的 ， 就 像 我 们 在 搜索 区 域 的 标签 云 区 域 里 
做 过 的 一 样 ， 标 题 和 段落 都 由 目 己 的 div URE: 


homepage_html/index.html 





<div id="main_text"> 


<h1 id="get_cooking">Get Cookin. ..</hl> 

<p>Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your friends 
or make them available to the rest of the world! </p> 
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<p>Create an account today and get cookin! </p> 
</div><!-- end main_text --> 


往 意 ， 上 面 文字 是 被 分 成 两 段 的 。 因 为 在 样式 页 中 ，Create an account... 那 一 段 是 跟前 面 一 段 
分 开 的 。 也 许 你 有 过 用 <br/> 标 签 来 换行 的 想法 ， 但 是 你 需要 考虑 一 下 内 容 的 上 下 文 。 在 这 个 例 
子 里 ， 两 块 文字 是 独立 的 两 段 话 ， 所 以 你 应 该 照 如 上 方法 将 它们 标记 出 来 。 


题 所 计划 的 那样 


在 标题 使 用 图 片 是 为 了 保留 学 体 的 样式 , 而 登录 和 注册 按钮 不 仅仅 是 一 段 文字 ,它们 还 
是 界面 控件 的 一 部 分 。 当 然 你 也 可 以 用 CSS 来 做 这 个 事情 ， 参 照 第 12 章 中 的 方法 。 


9.7.2 注册 和 登录 按钮 





我 们 会 用 图 片 来 制作 注册 和 登录 按钮 。 这 一 块 地 方 也 应 该 被 看 做 页 面 上 的 一 个 区 域 , 你 应 该 
用 一 个 有 合适 id 的 div 标签 把 它 包 右 起 来 。 


你 希望 这 个 按钮 是 可 以 单 击 的, 但 十 不 会 提交 任何 数据 ， 所 以 你 不 需要 用 表单 按钮 ， 只 用 一 
个 市 着 超 链 接 的 图 片 就 可 以 了 。 你 还 记得 a 标签 吧 ? 任何 在 开始 和 闭合 标签 之 间 的 内 容 都 会 成 为 
一 个 超 链接 ， 连 图 片 也 不 例外 ,你 会 得 到 一 个 可 以 单 击 的 图 片 。 现 在 , 在 页 面 上 插入 两 个 img 标 
签 ， 分 别 用 两 个 超 链 接 标 符 将 它们 围 起 来 ， 一 个 古 注 册 按 钮 ， 一 个 古 登 录 按 钮 : 


homepage_html/index.html 


<div id="signup_login"> 
<a href="/signup/"> 
<img src="images/btn_signup.png" alt="Sign up"> 
</a> 
<a href="/login/"> 
<img src="images/btn_login.png" alt="Log in"> 
</a> 
</div><!-- end signup_login --> 





每 个 图 片 标签 都 有 个 alt 属性 , 里面 的 文字 跟 按钮 图 片上 的 文字 一 样 HE T SAM 
幕 阅读 右 用 户 准 备 的) 。 这 样 汪 、 加 上 的 图 片 周围 会 有 一 圈 边 框 ， 用 来 表示 这 个 图 片 是 可 以 单 击 的 。 
边框 其 实 很 不 好 看 ， 我 们 稍 后 会 用 CSS 将 之 去 掉 。 
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9.7.3 ”最 新 菜谱 区 


跟 我 们 在 制作 标签 云 一 样 ， 你 需要 想 出 一 个 假 菜谱 放 在 这 个 区 域 里 。 最 终 ， 这 部 分 菜谱 是 用 
程序 从 数据 库 查询 出 来 然后 放 在 页 面 上 的 。 现 在 我 们 还 不 需要 做 出 这 个 功能 , 创建 这 个 页 面 的 目 
的 只 是 得 到 客户 的 反馈 。 

比 起 其 他 的 ， 这 个 区 域 的 样式 稍微 有 些 复杂 。 标题 是 个 普通 的 标题 , 但 是 用 来 表述 末 谱 的 段 
沙 有 一 点 全 合 段落 标签 添加 一 个 class 属性 , 因为 class 属性 很 适合 给 一 
组 相同 样式 的 元 素 (或 者 它们 的 子 元 素 ) 使 用 。 最 终 我 们 在 添加 样式 的 时 候 ， 就 可 以 指定 id 为 
latest_recipes 的 div 包围 着 的 段落 元 素 缩 进 显示 。 





homepage_html/index.html 


<div id="latest_recipes"> 
<h2 id="latest_recipes header">Latest Recipes</h2> 


<div id="latest_recipe_1" class="latest_recipe"> 
<h3><a href="#">Stuffed Chicken Breast</a></h3> 
<p>A lightly breaded breast of chicken stuffed with mushrooms 
and Swiss cheese. Easy to make even for beginners.</p> 
</div> 


<div id="latest_recipe_2" class="latest_recipe'"> 
<h3><a href="#4">Chocolate Pancakes</a></h3> 
<p>This complete-from-scratch classic pancakes recipe is sure 
to please even the pickiest eater, especially chocolate 
lovers. </p> 
</div> 
</div> 
每 个 全 谱 都 有 一 个 值 为 latest_recipe 的 class 属性 。 跟 id 属性 不 同 的 是 ，class 属性 可 
以 被 赋 给 不 同 的 元 素 。 在 编写 主要 内 容 的 HTML 代码 的 时 候 ， 你 就 应 该 开始 考虑 如 何 用 样式 表 


实现 设计 效果 之 类 的 事情 了 
这 时 如 果 Photoshop 里 的 样式 页 在 手边 的 话 会 很 有 帮助 ， 因 为 这 样 你 可 以 随时 查看 那些 地 方 
是 共用 同一 种 样式 的 。 


98 页 脚 


页 脚 区域 有 页 面 的 版 权 信 息 ， 还 有 隐私 政策 和 使 用 条 款 的 链接 。 在 原来 的 那个 网 站 上 ， 版 权 
信息 用 的 是 一 个 特殊 字符 ， 而 且 在 一 些 认 览 絮 中 不 能 被 正确 显示 。 当 开发 者 用 Dreamweaver, 
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Frontpage 这 种 视觉 化 编辑 软件 进行 开发 ， 然后 从 微软 的 Word 程序 中 复制 东西 的 时 候 ， 这 类 字符 
很 容 多 在 网 页 上 出 现 。 
像 版 权 符 态 、 特 殊 引 巨 等 其 他 各 种 特殊 符 志 ， 都 需要 用 实体 代码 (entity code) 添加 到 网 页 上 。 
在 页 脚 区 域 加 上 如 下 代码 : 


homepage_html/index.html 








<div id="footer"> <!-- start of the footer --> 


<p id="copyright">Copyright &copy; 2010 Foodbox, 
LLC, all rights reserved. </p> 
<p id="privacy_and_terms"> 
<a href="terms.html">Terms of Service</a> | 
<a href="privacy.html">Privacy Policy</a> 
</p> 
</div> <!-- end of the footer --> 
&copy i We — SERRA, A bd as EEA PEAY SA RAGA LSS EL AE SE. RET 
PRUECE FA AAS ERA bats FE SEP, AA ES ABS OIE A Se 


在 这 个 例子 里 ， 我 为 段落 打上 了 和 市 有 唯一 id 的 标签 ， 而 没有 为 它 定 义 一 个 由 iv， 因 为 p 标 
等 本 来 就 是 一 个 块 元 素 ， 它 之 中 的 文本 会 独占 一 行 ， 所 以 没有 必要 再 加 上 一 个 div 标签 。 


为 了 完成 建立 一 个 “内 容 灵 活 ” 的 文档 ， 你 不 需要 在 网 页 面 上 加 太 多 的 元 素 。 





实体 代码 

你 已 经 看 到 怎么 用 实体 代码 添加 版 权 符 号 了 。 除 此 之 外 你 还 可 以 用 它 来 做 别 的 事情 。 

浏览 器 会 忽略 一 个 以 上 的 连续 空格 ， 但 是 有 时 在 段落 中 你 会 需要 几 个 额外 的 空格 。 这 
时 你 可 以 用 &nbsp; (non-breaking blank space， 无 打 断 空格 的 缩写 ) 来 强制 浏览 器 显示 空 
格 。 

你 身边 那些 熟 赤 印刷 品 的 人 , 像 PR 部 门 , 可 能 不 喜欢 HTML 中 默认 的 引号 , 会 要 求 使 
用 约 形 引号 (curly quote) 。 那 么 你 可 以 用 “和 ”。 

你 还 可 以 搜索 一 下 HTML 实体 代码 ， 会 有 很 多 例子 。 甚 至 像 外 文中 令 人 厌烦 的 重读 符 
号 都 有 。 


现在 ， 你 已 经 完成 了 整个 页 面 ， 它 看 起 来 是 这 样 的 : 
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homepage_html/index.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: /7/ww.w3.org/TR/htm]4/strict.dtd"> 


<html Tang="en"> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Foodbox</title> 


</head> 
<body> 
<div id="page"> <!-- start of the page wrapper --> 
<div id="header"> <!-- start of header --> 


<img src="images/banner.png" alt="'Foodbox"> 


</div> <!-- end of header --> 
<div id="middle"> <!-- container for the sidebar and main region --> 
<div id="sidebar"> <!-- the sidebar --> 


<div 1d="search"> 
<h2 id="search_header">Search Recipes</h2> 
<form id="search_form" method="get" action="/recipes/"> 
<div> 
<input type="text" id="search_keywords" name="keywords"> 
<input type="image" alt="Search" src="images/search.png"> 
</div> 
</form> 
</div> 


<div id="browse_recipes"> 
<h2 id="browse_recipes_header">Browse Recipes</h2> 
<a Class="level_1" href="#4">desserts</a> 
<a Class="level_4" href="#">appetizers</a> 
<a Class="level_5" href="#">indian</a> 
<a Class="level_ 2" href="#">beef</a> 
<a Class="level_5" href="#">entrees</a> 
<a Class="level_ 4" href="#">mexican</a> 
<a Class="level_ 3" href="#">seafood</a> 
<a Class="level 4" href="#4">drinks</a> 
<a Class="level_2" href="#">pasta</a> 
<a Class="level_1" href="#4">italian</a> 
<a Class="level 2" href="#4">chicken</a> 
<a Class="level_4" href="#">pork</a> 
</div> <!-- end browse_recipes --> 


<div id="popular_ingredients"> 
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<h2 id="popular_ingredients_header">Popular Ingredients</h2> 
<a class="level_2" href="#">oregano</a> 

<a Class="level_4" href="#">gar1ic</a> 

<a Class="level_ 3" href="#">black beans</a> 

<a Class="level_3" href="#">app1es</a> 

<a cClass="level_3" href="#">bananas</a> 

<a Class="level_5" href="#">cheese</a> 

<a Class="level_ 3" href="#">lettuce</a> 

<a Class="level_1" href="#">chicken</a> 


</div> <!-- end popular_ingredients --> 
</div> <!-- end of the sidebar --> 
<div id="main"> <!-- start of main content --> 


<img id="main_image" src="Images/pasta. jpg" 
alt="Pasta and marinara sauce"> 


<div id="main_text"> 


<hl id="get_cooking">Get Cookin...</hl> 
<p>Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your friends 
or make them available to the rest of the world!</p> 


<p>Create an account today and get cookin! </p> 
</div><!-- end main_text --> 
<div i1d="signup_login"> 
<a href="/signup/"> 
<img src="images/btn_signup.png" alt="Sign UP ”> 
</a> 
<a href="/login/"> 
<img src="images/btn_login.png" alt="Log in"> 
</a> 
</div><!-- end signup_login --> 
<div id="latest_recipes'"> 


<h2 id="latest_recipes header">Latest Recipes</h2> 


<div id="latest_recipe_1" class="latest_recipe"> 
<h3><a href="#">Stuffed Chicken Breast</a></h3> 
<p>A lightly breaded breast of chicken stuffed with mushrooms 
and Swiss cheese. Easy to make even for beginners.</p> 
</div> 


<div id="latest_recipe_2" class="latest_recipe'> 
<h3><a href="#">Chocolate Pancakes</a></h3> 
<p>This complete-from-scratch classic pancakes recipe is sure 
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to please even the pickiest eater, especially chocolate 
lovers.</p> 
</div> 


</div> 


</div> <!-- end of main content --> 
</div> <!-- end of middle container --> 
<div id="footer"> <!-- start of the footer --> 


<p id="copyright">Copyright &copy; 2010 Foodbox, 
LLC, all rights reserved. </p> 
<p id="privacy_and_terms"> 
<a href="terms.html">Terms of Service</a> | 
<a href="privacy.htm1l">Privacy Policy</a> 


</p> 
</div> <!-- end of the footer --> 
</div> <!-- end of the page wrapper --> 
</body> 


</html> 


9.9 验证 标签 


之 所 以 让 你 手写 HTML， 目 的 是 为 了 得 到 一 个 合法 的 文档 。 制 定 HTML, XHTML 和 CSS 
标准 的 W3C 组 织 提 供 了 一 个 在 线 工具 ,可 以 让 你 检查 任何 页 面 。 你 可 以 提供 页 面 的 URL 或 者 将 
页 面 源码 复制 粘贴 到 工具 中 来 检测 其 合法 性 。 

有 些 具 有 HTML 编辑 功能 的 文本 编辑 带 提 供 了 针对 本 地 文件 的 验证 功能 ， 但 古 我 更 喜欢 结 
A Firefox {ill bt art Web Developer 工具 栏 来 做 这 项 工作 。 这 个 组 合 可 以 跨 平台 使 用 , mHE E. 
可 用 的 。 





9.9.1 为 网 页 开发 设置 Firefox 浏 览 器 


Firefox 是 一 于 很 受 欢 迎 的 广 宽带 ， 同 时 它 也 是 一 个 很 好 的 网 页 开发 工具 。 你 可 以 为 它 安装 
插件 和 扩展 包 来 增强 它 的 功能 , 所 以 我 们 会 用 Firefox 和 一 些 扩展 包 来 帮助 我 们 测试 网 站 和 网 络 
Dae 


如 果 你 还 没有 安装 最 新 的 Feirfox 浏览 器 ， 去 他 们 的 网 站 下 载 一 个 装 上 ， 然 后 启动 浏览 器 。 








O http://www.getfirefox.com/ , 
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9.9.2 Web Developer 工 具 栏 


Web Developer 工具 栏 可 以 将 训 览 左 变 成 一 个 强大 的 网 络 开发 环境 ， 而 且 是 专 为 网 络 应 用 开 
发 者 和 网 页 设计 师 准 备 的 。 工 具 栏 能 让 你 轻松 ae W3C 的 标准 检测 目 己 的 页 面 ， 并 且 还 目 市 一 
个 实时 的 CSS itia RIIT- ERSANG 


在 Firefox 中 输入 https://addons.mozilla.org/firefox/60/, iA. Web Developer 工具 栏 的 下 载 页 
面 ， 在 页 面 上 单 击 “Addto Firefox” 链 接 ， 在 弹出 的 对 话 框 中 单 击 安装 按钮 ， 安 装 该 工具 栏 。 


安装 完 这 个 扩展 包 之 后 ， 需 要 重启 浏览 器 ,重启 之 后 ,我 们 刚刚 安装 的 工具 栏 就 在 收藏 夹 栏 
的 下 方 。 


Ww 小 乔 爱 问 
过 为 什么 在 多 数 人 使 用 IE 的 时 候 ， 我 们 还 要 用 Firefox 开发 


对 比 IE, 用 Firefox 开发 可 以 节省 大 量 的 时 间 。 这 是 因为 Firefox 在 呈现 页 面 的 时 候 一 丝 
RA, T E 会 玩忽 职守 地 放 过 一 些 错误 ， 最 终 导 致 页 面 的 样式 表 变 成 一 个 焉 梦 。 当 然 ， 
你 还 要 在 IE 下 测试 网 页 ， 但 是 我 们 的 策略 是 先 在 Firefox 下 开发 ， 然 后 用 一 些 专 为 IE 准备 
的 技巧 改造 页 面 ， 比 如 一 些 用 注释 写 的 条 件 语 向 为 IE 专门 准备 一 些 样式 。 按 照 这 个 策略 ， 
你 能 节省 大 量 的 时 间 。 

随 着 几 个 新 版 的 发 布 ， 耻 也 慢 慢 地 在 遵守 规范 ， 而 且 在 尽 可 能 多 的 平台 上 用 尽 可 能 多 
的 浏览 器 测试 对 于 你 来 说 也 很 重要 。 但 是 由 于 Firefox 对 网 页 标准 的 严格 支持 ， 另 外 再 加 上 
它 强 大 而 有 帮助 的 各 种 插件 ， 所 以 我 推荐 使 用 Firefox 开发 网 页 。 


Linux 下 的 Firefox 


Linux AP ERAZ MARIKI, ART AARAA REA, 
理 系 统 中 就 有 现成 的 安装 包 可 以 用 ， 像 Ubuntu A P 


sudo apt-get install mozilla-firefox 





O 程序 员 可 能 会 对 工具 栏 的 session cookie 请 除 和 查看 报头 的 功能 感 兴趣 。 
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Firebug 

Firebug@ 这 个 工具 让 查看 页 面 的 HTML, CSS 和 JavaScript 变 得 异常 容易 。 虽 然 本 书 中 
我 们 不 会 使 用 它 ， 但 是 你 应 该 能 体会 到 它 是 一 个 珍贵 的 工具 。 它 可 以 让 你 查看 所 有 CSS 的 
定义 、 宽 和 高 以 及 其 他 元 素 的 属性 。Firebug 基本 上 可 以 算是 网 络 开发 者 的 调试 工具 。 


Firebug Lite 是 它 的 跨 浏览 器 版 本 ,能 才 你 从 I 的 梦 砷 中 解脱 出 来 。 


9.9.3 ”验证 文档 


验证 不 需要 伦 太 长 时 间 。 如 采 你 的 页 面 没 有 错误 , 将 会 有 一 条 友好 的 信息 告诉 你 页 面 是 合法 
的 。 如 采 你 看 到 了 错误 信息 ， 那 么 验证 报告 会 告诉 你 哪里 出 错 了 。 如 采 这 种 情况 发 生 了 ， 你 应 该 
从 页 面 的 顶端 开 始 排 查 修复 。 一 个 顶端 的 小 错误 可 能 会 引起 十 个 其 他 地 方 的 错误 。 解决 择 一 个 问 
题 之 后 ， 再 重新 验证 一 次 。 


验证 器 其 至 能 检测 出 符号 错误 ， 比 如 8& 的 使 用 错误 。 很 多 开发 者 在 URL 加 入 查询 字符 串 发 送 
EUR ae : 








http://www.example.com/search?first_ name=homer&last_last_name=simpson 

虽然 这 样 的 URL 用 起 来 疫 问 题 ， 但 是 验证 各 还 是 会 将 它 列 为 不 合法 。 标 准 的 做 法 是 将 它 
用 &amp ; 符 代 。 虽 然 在 现代 六 艳 部 中 很 少 会 由 & 侍 过 引 起 问题 ， 但 是 偶尔 蹦 出 的 错误 也 时 稍 发 
生 。 





9.10 HTIML 5 


在 写 这 本 书 的 时 候 ，HIML 5 的 仍然 属于 起 日 阶段 ， 但 是 很 多 人 已 经 开始 做 针对 它 的 适应 工 
ÆT. BALDEA WA Axt HTML 5， 但 是 它 是 同 后 兼容 的 。 而 事实 上 ，HIML 5 的 
doctype 也 会 强制 IE6 用 标准 模式 呈现 。 这 种 兼容 性 可 以 让 我 们 用 CSS 做 出 代 有 外 观 的 网 页 。 
“HTML 5 RRE” JE T EAF HTML 5 靠拢 的 网 站 。 


HTML 5S 之 所 以 如 此 吸引 人 ,是 因为 它 更 加 看 重 对 内 容 的 标注 。 在 本 革 中 ， 我 们 用 div 元 素 
将 标题 、 侧 边栏 、 主 内 容 和 页 脚 标 记 出 来 ， 但 是 如 采 我 们 用 HTML 5， 页 面 看 起 来 会 古 这 样 的 : 





@ http://getfirebug.com/, 
@ http://getfirebug.com/lite.html , 
© http://htmlSgallery.com/, 


homepage_htmli/index_html5.html 


<!DOCTYPE html> 


<html lang="en-US"> 
<head> 
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<meta http-equiv="content-type" content="text/html ;charset=utf-8" /> 


<title>Foodbox</title> 
</head> 


<body> 
<section id="page"> 


<header i1d="header"> 

<img src="images/banner.png" al t="Foodbox"> 
</header> 
<section id="middle"> 

<aside id="sidebar"> 


<section id="search"> 
<h2 id="search_header">Search Recipes</h2> 


<form id="search_form" method="get" action="/recipes/"> 


<div> 


<input type="text" id="search_keywords" name="keywords"> 
<input type=""image" alt="Search" src="images/search.png''> 


</div> 
</form> 
</section> 


<section id="browse_recipes"> 


<h2 id="browse_recipes_header">Browse Recipes</h2> 


<a Class="level_1" href="#4">desserts</a> 
<a Class="level_4" href="#">appetizers</a> 
<a Class="level_5" href="#">indian</a> 
<a Class="level_ 2" href="#">beef</a> 
<a Class="level_5" href="#">entrees</a> 
<a class="level_ 4" href="#">mexican</a> 
<a Class="level_3" href="#">seafood</a> 
<a Class="level_ 4" href="#">drinks</a> 
<a Class="level_2" href="#">pasta</a> 
<a Class="level_1" href="#">italian</a> 
<a Class="level_ 2" href="#">chicken</a> 
<a Class="level_4" href="#">pork</a> 
</section> 


<section id="popular_ingredients'> 


<h2 id="popular_ingredients_header">Popular Ingredients</h2> 


<a Class="level_2" href="#">oregano</a> 
<a Class="level_4" href="#">garlic</a> 
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<a Cclass="level 3" href="#">black beans</a> 
<a Class="level_3" href="#">apples</a> 

<a cClass="level_ 3" href="#">bananas</a> 

<a Class="level 5" href="#">cheese</a> 

<a class="level_ 3" href="#">lettuce</a> 

<a Class="level_1" href="#">chicken</a> 

</section> 
</aside> 


<section id="main"> 
<img id="main_image" src="iImages/pasta.jpg" 
alt="Pasta and marinara sauce'> 


<article id="main_text"> 

<hl id="get_cooking">Get Cookin...</hl> 

<p>Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your friends 
or make them available to the rest of the world! </p> 


<p>Create an account today and get cookin! </p> 
</article> 


<section id="signup_login"> 
<a href="/signup/"> 
<img src="images/btn_signup.png" alt="Sign up"> 
</a> 
<a href="/login/"> 
<img src="images/btn_login.png" alt= Log in"> 
</a> 
</section> 


<section id="latest_recipes"> 
<h2 id="latest_recipes_header">Latest Recipes</h2> 
<article id="latest_recipe_1" class="latest_recipe'"> 
<h3><a href="#4">Stuffed Chicken Breast</a></h3> 
<p>A lightly breaded breast of chicken stuffed with mushrooms 
and Swiss cheese. Easy to make even for beginners. </p> 
</article> 
<article id="latest_recipe_2" class="latest_recipe'> 
<h3><a href="#">Chocolate Pancakes</a></h3> 
<p>This complete-from-scratch classic pancakes recipe is sure 
to please even the pickiest eater, especially chocolate 
lovers.</p> 
</article> 
</section> 
</section> 
</section> 
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<footer id="footer"> 
<p id="copyright">Copyright &copy; 2010 Foodbox, 
LLC, all rights reserved. </p> 
<p id="privacy_and_terms"> 
<a href="terms.html">Terms of Service</a> | 
<a href="privacy.html">Privacy Policy</a> 
</p> 
</footer> 
</section> 


</body> 
</html> 


这 些 代 码 的 摘 述 性 比 HTML 4.01 Strict Bo, 但 是 由 于 ATMLS pa Tp, REE 
把 注意 力 集中 在 HIML 4.01 Strict 上 。 如 琳 你 想 更 超前 ， 可 以 在 接 下 来 的 练习 里 尝试 用 HTMLS 
的 模板 。 


9.11 小 结 





在 本 革 中 ,你 学 会 了 如 何 建立 一 个 合法 的 页 面 ， 并且 如 何 将 页 面 内 容 结构 化 标记 ,以 方便 以 
后 加 上 样式 。 你 可 以 将 这 个 结构 用 在 以 后 的 项 目 中 ,因为 它 只 包含 了 少量 的 内 容 和 结构 化 的 元 素 。 
在 本 章 中 , 你 要 秆 握 的 主要 内 容 古 将 文档 结构 化 并 且 语 义 化 地 标记 出 来 , 同时 保证 代码 灵活 多 变 
且 符 合 规范 。 我 们 从 带 辑 上 将 相同 的 元 素 用 标签 分 隔 成 组 ， 然 后 用 HTML 的 各 种 标签 处 理 各 组 
目 己 的 内 容 。 现 在 我 们 会 用 CSS 将 这 个 页 和 面 大 变样。 





O 一 些 老 一 点 的 训 览 右 可 能 不 认识 诸如 aside 一 类 的 标签 ， 所 以 无 法 加 载 它们 的 样式 。 但 是 你 可 以 用 JavaScript 中 
的 document .creatElement(O) 方 法 来 强制 浏览 器 认识 这 个 标签 ， 只 不 过 这 需要 用 户 的 浏览 器 激活 JavaScript 功能 。 
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络 发 布 。 并 且 在 了 最终 版 本 的 网 页 中 ， 我 们 也 会 用 到 这 些 图 片 。 在 本 草 中 ， 你 会 了 解 到 适合 在 网 页 
上 使 用 的 各 种 图 像 格 式 ， 以 及 如 何 从 Photoshop 文档 中 将 订户 区 域 导 出 成 独立 文件 。 然 后 ， 你 惑 
可 以 在 HTML 中 使 用 这 些 图 片 了 。 


10.1 





图 像 优化 





在 导出 图 像 之 前 ， 先 要 熟悉 儿 个 天 于 网 络 图 像 的 概念 ， 比 如 说 文件 大 小 、 文 件 类 型 和 图 厂 优 


ft. 实际 上 ,市面 上 有 很 多 软件 能 帮 你 做 这 些 优化 工作 , 但 古 为 了 能 让 优化 出 的 效 条 更 伯 合 需求 ， 
你 还 是 应 该 了 解 为 什么 要 做 优化 ， 如 何 做 优化 。 


度 。 


所 谓 图 像 优 化 ， 指 的 征 在 缩减 图 片 文件 体积 以 便 网 页 使 用 的 同时 ， 保 持 图 像 的 质量 和 清晰 
这 样 做 可 以 市 来 如 下 益处 。 


O 对 于 用 户 来 讲 ， 小 体积 的 图 片 更 友好 。 对 图 像 进行 优化 之 后 ， 人 们 下 载 网 页 的 速度 会 提 


高 ， 这 就 意味 着 网 站 速度 变 快 了 ; 反之， 如 琳 页 面 上 全 是 巨大 的 没有 优化 过 的 图 像 ， 因 
而 导致 人 们 要 等 半分 钟 才能 看 到 内 容 ， 用 户 一 定 会 不 耐烦 的 。 


o 小 体积 图 片 可 以 省 流量 。 网 站 主机 通常 会 限制 网 站 每 个 月 的 可 用 流量 。 如 琳 网 页 中 的 图 


厂 体 积 小 一 些 ， 额 定 流 量 束 能 晚 些 用 完 。 有 些 主 机 提供 商会 在 超过 额定 流量 之 后 收取 籁 
外 的 费用 。 就 算是 目 己 准备 主机 的 商业 网 站 ， 也 需要 为 流量 付费 。 这 个 省 钱 的 方法 听 上 
去 不 和 握 什 么 ,但 是 日 积 月 昧 起 来 也 是 很 可 观 的 ， 特 别 古 当 网 站 的 独立 访问 量 达 到 一 定 规 
模 的 时 候 。 








o 小 体积 图 片 可 以 省 空间 。 的 确 , 现在 大 家 都 在 说 硬盘 便宜 了 , 不 过 如 有 果 网 站 不 用 那 种 巨大 


体积 的 图 片 ， 那 在 存储 方面 还 是 能 省 下 很 多 钱 的 。 亚 马 还 的 S3 服务 费用 既 包 括 流 量 费 用 
又 包括 存储 空间 费用 ， 你 应 该 尽 可 能 将 图 片 的 体积 缩小 以 方 省 存储 费用 和 流量 费用 。 
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下 载 次 数 

虽然 现在 高 速 互联 网 已 经 比较 普及 了 ,但 还 是 应 该 考虑 页 面 资 源 的 下 载 次 数 问题 。 一 个 100 
KB 的 JPEG 图 片 可 能 不 怎么 大 ， 但 是 如 果 有 5 张 这 样 的 图 片 ， 外 加 122 KB 的 JavaScript 原型 库 
AIL CSS 文件 及 其 他 内 容 ， 下 载 这 些 图 片 的 时 间 就 可 能 达到 好 几 秒 其 至 更 多 。 用 户 通 篆 没 多 
少 耐 心 ， 所 以 你 需要 让 自己 的 网 页 尽快 显示 出 来 。 

有 很 多 方法 可 以 让 你 算出 一 个 页 面 的 大 小 。 你 可 以 手动 计算 网 页 、 脚 本、CSS 和 图 片 文件 的 
大 小 和 。 更 简单 的 方式 是 用 第 三 方 的 服务 来 帮 你 计算 。 在 网 页 http://www.websiteoptimization.comy/ 
services/analyze/ 上 ， 输 入 一 个 网 址 ， 就 能 看 到 一 份 详细 的 报告 。” 


10.2 ”处 理 不 同 格式 的 图 像 
图 片 的 类 型 有 很 多 ， 优 化 的 工作 并 不 简单。 比如 说 ， 一 张 照 片 和 一 个 Logo， 它 们 所 需要 的 
优化 是 不 一 样 的 。 


在 训 览 华中 ， 你 会 面 对 三 种 主要 的 图 像 文件 格 却 : GIF, PNG 和 JPEG。 这 三 种 格式 的 图 像 
我 们 都 会 讲 到 。 








10.2.1 GIF 


GIF Æ Graphics Interchange Format 的 简称 。 这 是 一 种 拥有 256 种 24 位 RGB 颜色 的 图 片 格 
式 。 虽 然 受 限 的 颜色 种 类 让 它 不 适合 做 照片 , 但 是 用 来 做 Logo 图 片 还 是 很 不 错 的 ， 男 外 它 还 支 
持 动 画 。 

Wy GIF 文件 都 被 用 来 作 Logo KEH, ALA Esc ir HA a 这 意味 着 你 可 以 看 到 部 
分 图 片 后 面 的 背景 。 但 是 大 多 数 开 发 者 都 转向 PNG 的 怀抱 了 ， 因 为 PNG 对 透明 的 支持 更 好 。 

GIF 文件 优化 


GIF 图 像 最 多 只 能 有 256 种 颜色 , 优化 图 像 就 需要 减少 文件 中 所 存储 颜色 的 种 类 。 如 采 Logo 
中 只 有 16 种 颜色 ， 那 么 你 就 将 软件 设置 为 只 输出 16 种 颜色 。 减 少 颜 色 就 缩小 了 文件 大 小 ,但 是 
图 片 可 能 变 得 惨不忍睹 。 越 复杂 的 图 片 需要 越 多 的 颜色 ，Photoshop 提供 了 预览 功能 ， 这 样 你 就 
能 看 到 图 片 在 优化 设置 下 所 呈现 出 的 状态 。 


减少 GIF 图 片 的 颜色 数 ,， 要 按照 2 的 次 方 数 来 减少 : 16、32、64、128 和 256 都 是 合理 的 GIF 





© 想 要 用 这 种 方法 ， 网 页 必须 已 经 处 于 向 外 界 发 布 的 状态 。 如 果 还 没有 到 那个 状态 ， 你 可 以 人 工 计算 大 小 ,或 者 利 
用 Dreamweaver 等 类 似 的 工具 ， 这 些 工具 能 为 你 生成 一 份 关 于 网 页 大 小 和 预 估 下 载 时 间 的 详细 报告 。 
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颜色 数 。 如 采 你 把 这 个 数值 设 为 非 2 的 次 方 ， 文 件 的 体积 不 会 有 任何 变化 ， 如 和 朱 这 个 数 小 于 16, 
那么 图 像 会 出 问题 ， 可 能 根本 就 不 能 呈现 出 来 ， 所 以 你 不 用 考虑 16 种 以 下 的 颜色 。 


Photoshop 的 Save for Web & Devices (存储 为 Web 或 设备 所 用 格式 ) 功能 提供 了 控制 GIF 颜 
色 数 量 的 功能 (参见 图 10-1)。 
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10-1 Photoshop 的 Save for Web & Devices 选项 中 有 若干 个 设置 ， 能 为 GIF 图 像 自 动 挑选 所 需 的 颜色 
10.2.2 PNG 


PNG 是 Portable Network Graphics AY fa]5, #2 GIF 的 替代 品 。PNG 是 一 种 采用 无 损 压 缩 的 位 
图 图 像 格 式 。 它 只 支持 RGB 颜色 空间 ， 专 为 网 络 使 用 而 设计 ， 同 时 对 透明 支持 得 非常 好 。 虽 然 
这 种 格式 的 透明 效 末 只 有 较 新 的 训 览 左 才 支持 ， 但 是 不 要 因此 就 放弃 它 ， 因 为 这 种 格式 的 图 片 质 
量 韭 常 高 。 


PNG 文 件 优化 


优化 PNG 图 像 需要 做 的 是， 为 图 像 选 择 不 同 的 “位 深度 ” (bit depth) 。 图 像 越 复杂 ， 文 件 的 
体积 越 大 。 但 是 PNG ER JPEG 的 不 同 之 处 在 于 ，PNG 采用 的 古 无 损 压 缩 的 方式 。 所 以 PNG 很 适 
A Logo 和 其 他 非 照 厂 图 像 ， 像 图 标 、 帝 有 底 纹 、 了 表 影 或 者 发 光 效 霖 的 按钮 等 。 


10.2 ”处 理 不 同 格式 的 图 像 A 123 


在 使 用 PNG 文件 的 时 候 要 特别 注意 文件 大 小 ， 一 个 24 位 市 有 透明 效 末 的 PNG 文件 可 能 会 
TERK. 


10.2.3 JPEG 


JPEG 征 一 种 适合 有 照片、 图片 的 压缩 格式 ， 它 被 广汉 支持 ， 采 用 有 损 压 缩 。 所 以 如 采 你 过度 
压缩 或 者 重复 压缩 了 JPEG x, HRES H TRE, 


因为 JPEG 并 不 支持 透明 , 所 以 它 只 适合 照片 图 片 。 像 Logo、 截 屏 和 渐变 图 形 等 肯定 是 不 适 
合用 JPEG 文件 的 。 
不 要 重复 压缩 JPEG 文件 


千 万 不 要 重复 压缩 JPEG 文件 。 如 果 原 始 文件 用 20% 的 压缩 卒 被 压缩 了 ,效果 仍然 不 满 


S, 不 要 用 新 得 到 的 文件 再 进行 压缩 ,而 是 应 该 重新 压缩 原始 文件 。 要 记得 保留 一 份 原 始 的 
未 压缩 文件 ， 这 样 就 能 一 直 使 用 这 个 原始 文件 进行 压缩 了 ， 





JPEG 文 件 优 化 


优化 JPEG 文件 很 简单 ， 压 缩 图 像 让 它 的 体积 变 小 就 可 以 了 。 压 缩 虽 然 可 以 有 效 地 压缩 文件 
体积 ， 但 也 会 为 图 片 市 来 质量 损失 。 你 需要 在 文件 大 小 和 图 像 质 量 之 间 权 衡 利 疾 。 


你 可 以 在 保存 JPEP 文件 的 时 候 压 缩 JPEG 文件 。 在 Photoshop 中 ， 当 你 选择 将 文件 你 存 为 
JPEG 格式 时 ， 就 会 有 选择 压缩 等 级 的 选项 (参见 图 10-2)。 所 有 的 图 像 处 理 软件 在 压缩 JPEG 的 
时 候 都 是 一 样 的 ， 它 们 会 让 你 选择 压缩 等 有 级， 这 时 压缩 等 级 就 代表 了 图 像 质量 。 更 大 的 压缩 比 代 
表 了 更 差 的 图 像 质量 。 
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Image Options 一 Cancel | 
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small File large fle 
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10-2 ”压缩 JPEG 文件 
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后 一 个 方法 了 : 减 小 图 片 的 宽 


y 


MR EEM Za RCE AAD ERA, ABA RAR T 


和 高 。 


数码 相机 


一 些 消费 者 导向 的 数码 相机 会 把 照片 存 为 JPEG 格式 。 如 果 你 的 相机 就 是 这 样 的， 我 强烈 
建议 你 向 厂商 咨询 一 下 ， 问 问 那 些 照片 被 压缩 到 什么 程度 了 。 如 果 可 能 ， 最 好 想 办 法 得 到 未 


经 压缩 的 图 片 。 不 少 相 机 都 有 调整 照片 存储 方式 的 选项 。 我 建议 用 RAW 格式 存储 照片 ， 然 后 
用 Photoshop 将 它们 转换 为 JPEG 文件 。 如 果 需 要 更 多 信息 ， 看 一 看 你 的 相机 说 明 书 。 

如 果 照 片 是 从 专业 摄影 师 那 里 拿 到 的 ， 记 得 向 他 们 索要 RAW 文件 或 者 DNG (Digital 
Negative Filegs， 数 字 负 片 文 件 ) ， 而 且 要 记 住 ， 在 摄影 师 拍 照 之 前 就 要 将 这 些 要 求 告诉 他 。 





10.3 ”文档 切片 


打开 样式 页 文档 ， 用 Slice (切片 ) FU Slice Select (切片 选择 ) 工具 从 这 个 文件 中 切 出 几 张 图 
片 。 只 要 我 们 做 出 了 正确 的 设置 ，Photoshop 就 会 为 我 们 自动 完成 图 像 优化 。 我 们 并 不 需要 用 软件 
把 整个 图 斤 都 目 动 转化 为 网 页 ， 只 需要 从 中 切割 出 几 个 图 片 给 样式 表 用 就 好 了 。 


样式 页 确认 


要 保证 所 有 的 元 素 都 坐落 在 网 格 线 内 ,因为 这 些 网 格 线 将 是 切片 的 辅助 线 , 我 们 肯定 不 希望 
不 小 心 将 文字 或 者 图 片 切 开 。 将 图 片 放大 到 300%, 然后 按 住 Space 键 激 活 手 形 工具 ， 按 住 Space 
键 的 同时 按 住 鼠 标 ， 左 右 移 动 图 片 ， 确 休 Logo、 标 题 和 图 片 什么 的 都 恰好 在 网 格 线 之 中 ， 文 字 
或 者 图 片 的 边 绿 都 没有 超过 网 格 线 。 图 10-3 就 提供 了 一 个 反例 。 



































10-3 超过 网 格 泥 围 的 元 素 


10.4 创建 切片 <i 125 


如 果真 的 有 什么 东西 越过 了 网 格 线 ， 选 择 Move 工具 然后 右键 单 击 (Windows 系统 ) 或 者 
按 住 Command 键 的 同时 单 击 (Mac 系统 ) 越过 网 格 线 的 那 部 分 ， 就 会 弹出 一 个 菜单 ， 显 示 鼠 标 
下 的 所 有 图 层 的 名 字 。 选 择 那 个 出 轨 的 元 素 ， 然 后 用 方向 键 慢 慢 地 将 该 元 素 移 动 到 它 应 该 存在 
的 位 置 。 


10.4 创建 切片 


我 们 会 在 这 个 文档 中 创建 几 个 不 同 的 切片 , 虽然 它们 将 被 存 为 不 同 格 式 的 文件 , 但 是 切片 的 
过 程 是 一 样 的 。 我 们 先 从 Foodbox 的 Logo FF. 


从 工具 栏 选择 切片 工具 ， 用 它 在 Logo 周围 画 一 个 方 框 ， 方 框 的 左上 角 应 该 与 18 像素 位 置 
的 水 平 网 格 线 和 72 像素 位 置 的 竖 直 网 格 线 的 交点 重合 ， 方 框 的 右 下 和 角 则 应 该 位 于 552 RRE 
的 竖 直 网 格 线 和 108 像素 的 水 平 网 格 线 的 交点 之 上 。 记 得 勾 选 Snap to Grid OOF) 选项 ， 
这 个 选项 能 加 快 对 齐 的 操作 。 











从 辅助 线 切 卢 


如 果 你 够 勤快 ,在 添加 每 个 元 素 的 时 候 部 作 了 辅助 线 , 那么 你 完全 可 以 跳 过 这 些 手动 切 
片 的 步 又。 选中 Slice 工具 的 时 候 ， 你 可 以 去 点 那个 Slices from Guides 〈《 从 辅助 线 切 割 ) 的 
按钮 。 但 是 前 提 是 辅助 线 一 定 是 到 位 而 且 准 确 的 , 但 这 样 可 能 会 得 到 不 少 多 余 的 切片 。 如 果 
辅助 线 不 到 位 ， 你 可 能 会 不 小 心 把 一 张 元 整 的 图 片 切 开 。 

不 管 你 需要 切 多 少 切片 ,这 种 方法 都 会 玫 你 市 省 一 点 时 间 一 一 即便 在 切 完 之 后 你 还 需要 
e 


很 多 GMP 4H PRAZAS ERA. 


然后 选用 Slice Select (切片 选择 ) 工具 一 一 这 个 工具 应 该 位 于 Slice 工具 的 下 方 ， 按 住 工 具 
栏 中 的 切片 按钮 保持 不 动 ， 你 就 能 看 到 它 了 。 用 该 工具 双击 Logo 切片 。 将 切片 的 名 字 设 置 为 
Banner， 这 里 设 萤 的 名 字 束 是 该 切 厂 将 要 被 保存 的 文件 名 字 。 要 记得 为 每 个 文件 命名 ， 合 则 
Photoshop 会 自动 生成 名 字 ， 从 而 让 你 的 文件 变 得 混乱 。 








®© 在 Photoshop CS4 之 前 的 版 本 中 , 切片 工具 在 工具 栏 中 是 一 个 单独 的 图 片 , 但 是 在 Photoshop CS4 中 , 它 位 于 Crop 
( 剪 切 ) 工具 之 后 。 

@ 为 切片 命名 的 另外 一 个 好 处 是 帮助 你 区 分 所 需要 的 切片 和 Photoshop 自动 创建 的 切片 。 切 片 的 时 候 总 会 有 些 重 县 
的 文件 或 者 你 不 需要 的 文件 ， 这 时 文件 名 就 能 帮 你 找 出 哪些 是 需要 导出 的 切片 。 
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将 剩 下 的 图 片 也 做 成 切片 
用 同样 的 方法 将 其 他 图 片 也 切割 出 来 ， 同 时 记得 为 它们 命名 。 你 总 共 要 切 出 以 下 图 片 : 


O 搜索 沫 谱 部 分 的 顶部 (search_recipes) 
O 搜索 按钮 (search) 
O 菜谱 浏览 区 域 的 顶部 (browser Tecipes ) 
最 受 欢迎 食材 的 顶部 (popular_ingredients) 
意大利 面 的 图 片 (pasta) 
Get Cookin’" 标 题 (get cookin) 
最 新 业 谱 的 标题 (latest_recipes) 
登录 按钮 (btn_login ) 
注册 按钮 (btn_signup) 
切片 的 时 候 要 注意 沿 着 网 格 线 切 制 。 如 果 有 哪个 图 片 越过 了 某 条 网 格 线 ,那么 就 将 切片 扩大 
到 与 乙 相 邻 的 另外 一 条 网 格 线 上 。 切 出 来 的 图 片 应 该 正好 是 18 像素 的 倍数 ， 使 其 限定 在 基本 网 
格 线 内 。 在 图 10-4 中 ， 你 可 以 看 到 完成 切片 的 样式 页 。 


OO 0 oO UO O 
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with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your 
friends or make them available to the rest of the 
world! 











Create an account today and get cookin! 





Latest Recipes 


ed Chicken Breast 
Allightly-breaded breast of chicken stuffed with mushrooms and Swiss cheese. 
Easy to make even for beginners! 








10-4 样式 页 切片 完成 后 的 样子 


@ 虽然 你 可 以 切 出 任何 大 小 的 图 片 ， 但 是 你 要 做 好 用 CSS 为 图 片 加 上 外 边 距 (margin) 和 内 边 距 (padding) 的 准 
备 ， 好 让 图 片 仍 然 处 于 网 格 之 中 。 


10.5 将 Banner 导出 成 PNG 文件 <@ 127 





为 了 使 之 后 的 CSS 的 工作 变 得 更 简单 ， 最 好 让 侧 边 栏 的 标题 的 宽度 和 高 度 保持 一 致 ， 分 别 
为 180 像素 和 36 像素。 然后 把 Get Cookin’ Fi Latest Recipes 这 两 张 图 的 大 小 统一 为 长 198 像素 ， 
宽 54 像素 。 


设 定 切 厂 名 字 的 时 候 你 可 以 检查 它 的 大 小 。 以 Get Cookin 切 族 为 例 ， 双 击 之 后 ， 信 息 对 话 
HERRI X, Y 坐标 代表 的 是 切片 的 起 始点 , 高 和 宽 的 数值 则 古 相 对 于 那个 起 始点 坐 标的 距离 。Get 
Cookin 切片 的 起 始 坐 标 应 该 是 X 为 378、 立 为 232， 它 的 宽 征 162 像素 ， 高 是 54 像素 。 


保存 文档 四 同时 ， 切 厂 信 息 也 被 体 存 下 来 了 ， 这 样 下 次 再 打开 的 时 候 就 不 用 再 去 切片 了 。 











10.5 将 Banner 导出 成 PNG 文件 


虽然 你 可 以 将 Logo 导出 成 任意 类 型 的 文件 , 但 古 在 这 个 页 面 上 , 我 们 会 用 PNG 格式 。PNG 
不 但 是 无 损 压 缩 ， 还 支持 显示 很 多 颜色 。 而 且 页 面 上 的 Logo 有 半 变 消失 的 反射 效果 ， 这 个 效果 
对 于 标准 GIF 来 说 大 复杂 了 ， 而 JPEG 的 压缩 又 会 让 Logo MARA IER o 


Logo 图 片 位 于 一 片 黄色 背景 之 上 ， 所 以 我 们 没有 必要 将 它 弄 成 带 有 透明 背景 的 图 片 ， 那 样 
` 会 让 人 守 完 到 任何 变化 。 但 是 我 们 找到 了 一 个 很 好 的 借口 ， 那 就 是 借 此 机 会 让 你 学 习 如 何 制 作 
透明 的 PNG 图片, 这 样 等 你 再 遇 到 需要 的 情况 时 就 能 自己 完成 了 。 在 Photoshop F, 为 了 能 导 
ATS HAA, 你 需要 将 该 图 片 下 的 所 有 图 层 都 去 挥 。 这 意味 着 首先 要 把 背景 图 层 变 成 一 个 普通 
图 层 。 在 图 层面 板 中 找到 背景 图 层 ， MAAR, 在 弹出 的 Layer Properties 对 话 框 中 将 这 个 图 层 
命名 为 background layer， 然 后 按 确 认 按 钮 。 


10.5.1 RAKE 


为 了 导出 带 透 明 背 景 的 PNG， 你 得 把 Banner 后 面 的 所 有 图 层 都 隐藏 起 来 。 单 击 背 景 图 慨 和 
黄色 页 头 图 层 左 侧 的 眼睛 标志 就 可 以 隐藏 图 层 。 然 后 Photoshop 会 显示 一 个 棋盘 状 的 背景 ， 你 的 
Banner WEA ELA FAIA 10-5 一 样 了 。 


food 
` foo 
10-5 Logo 背后 的 透明 图 层 














| h 
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10.5.2 ”保存 切片 


Photoshop 中 的 Save for Web & Devices 来 单 选 项 是 专 为 保存 网 络 优化 图 片 设置 的 ， 普 通 的 保 
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存 按钮 就 没有 这 个 功能 。 先 中 这 个 选项 后 ， 你 会 看 到 文档 的 预 宽 图 ， 里 面 的 切片 都 已 经 就 绪 。 


选择 包含 Logo 的 那个 切片 ， 这 时 右边 的 侧 边 栏 会 显示 相应 的 切片 属性 。 你 可 以 为 每 个 切片 
单独 设置 ， 可 以 把 它们 导出 成 PNG、JPEG 或 者 GIF 等 不 同 的 格式 。 








将 导出 类 型 设置 为 PNG-24, 注意 Transparency (HY) 这 个 选项 要 勾 选 上 。 选 中 这 个 选项 后 ， 
在 预览 中 看 到 的 图 片 背 景 就 和 你 在 画布 上 看 到 的 是 一 样 的 了 ， 都 古 棋 盘 状 的 。 如 图 10-6 所 示 。 

















| : : Er 
Dm ~ exe g 
| 一 BB 
© | Ea 

le 























im y L 


10-6 ”导出 Foodbox 的 Logo 








单 击 保 存 按钮 会 弹出 Save Optimized As (优化 保存 为 ) 对 话 框 。 将 保存 地 址 设置 为 Foodbox 
的 项 目 文件 夹 中 ，Photoshop 会 为 你 创建 一 个 images (图 片 ) 文件 夹 。 文 件 名 不 用 改 ， 但 是 将 保 
存 类 型 改 为 Inages only (只 保存 图 片 )， 将 Slices option 改 为 Selected Slices。 文 件 名 将 和 你 之 前 
设置 切片 属性 时 输入 的 一 样 。 


保存 后 确认 一 下 Bannerpng 是 不 是 存 到 images 文件 中 了 ， 然 后 开始 准备 导出 其 他 的 图 片 。 
10.6 ”导出 其 他 图 片 


取消 彰 景 图 层 和 页 头 图 层 的 隐藏 ， 然 后 再 选择 Save for Web & Devices 人 选项。 选中 意大利 面 
的 图 片 ， 将 类 型 改 为 JPEG 图 乒 ， 设 次 图 乒 质 量 为 80。 质 量 越 好 ， 图 片 文 件 体积 越 大 。 所 以 你 
做 好 权衡 。 


选中 登入 按钮 切 族 ， 格 式 设 置 成 PNG8， 注 意 不 要 勾 选 Transparency 选项 。 注 册 按 钮 和 搜索 
图 标 也 一 样 处 理 。 之 所 以 不 用 24 位 的 PNG 格式， 是 因为 这 些 按钮 的 颜色 不 多 ，8 位 正好 。 

标题 图 像 需 要 存 为 GIF。 选中 Get Cookin 切片 ， 按 住 Shi 坦 键 ， 单 击 其 他 的 标题 ， 这 样 可 以 
选中 所 有 的 标题 切片 ， 然 后 统一 把 它们 的 格式 改 为 GIF， 这 样 的 设置 会 对 所 有 的 切片 生效 。 

继续 按 住 Shift 键 ， 单 击 意 大 利 图 片 、 搜 索 按 钮 、 登 入 按钮 和 注册 按钮 的 切片 。 然 后 单 击 保 


存 按钮 ， 将 所 有 的 切片 存 进 images 文件 夹 。 在 Save Optimized As 对 话 框 中 采用 上 述 相 同 的 设置 ， 
所 有 的 图 片 都 会 寻 出 到 正确 的 位置。 





D 这 里 完全 是 为 了 练习 演示 的 需要 才 用 GIF 的 ， 你 完全 可 以 用 PNG-8 RRE. 
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图 片 全 部 导出 之 后 记得 保存 一 下 Photoshop 文档 ， 这 个 软件 会 把 切片 和 它们 各 自 的 设置 保存 
起 来 ， 以 便于 以 后 的 调整 和 导出 。 


10.7 ”小 结 





本 革 里 你 学 到 了 网 页 中 不 同 图 片 文件 的 类 型 , 并 且 知 道 了 如 何 从 设计 好 的 样式 页 中 对 这 些 图 
片 进行 切片 。 利 用 Photoshop 的 切 片 功 能 来 做 图 三 优化 对 于 日 后 网 页 的 外 观 改进 古 很 有 帮助 的 ， 
因为 你 只 需要 改动 样式 页 然后 重新 导出 图 片 就 可 以 了 。 
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使 用 CSS 布局 


为 了 将 纸 上 的 设计 稿 实现 成 网 页 , 我 们 已 经 走 过 了 一 段 很 长 的 路 , 现在 终点 就 在 前 方 。 BE, 
我 们 会 接触 到 网 页 设计 中 最 不 好 理解 的 概念 : 用 CSS 来 安排 各 个 元 素 的 摆 放 位 置 。 这 个 东西 具 
体 实现 起 来 貌似 不 难 , 但 是 如 采 要 真正 理解 它 背 后 的 原理 ,还 是 需要 一 番 周 折 的 ， 至少 比 决定 配 
色 方 案 要 困难 许多 。 这 一 章 的 任务 ， 就 是 指导 你 了 解 CSS 的 一 些 原理 和 技巧 ， 让 你 可 以 用 它 将 
没有 桩 却 的 页 面 变 得 跟 样 慌 页 几乎 一 模 一 样 。 


11.1 浏览 器 招 人 大 


AURA ED GE ae PL (更 准确 地 说 , ce DOE a lle AL), 基于 CSS 的 网 页 设计 会 容易 很 多 。 
然而 ， 我 们 生活 在 一 个 开源 支持 者 和 商业 软件 开发 者 之 间 战 争 不 断 的 世界 ， 人 们 总 在 争论 标 
准 应 该 如 何 实现 。 在 前 儿 半 我 们 讨论 过 这 个 问题 ， 比 如 正和 Firefox 呈现 内 容 的 方式 不 一 样 。 
让 设计 支持 两 个 齐 贤 如 已 经 够 困难 了 ,但 是 别 扎 记 还 有 平 琳 公司 的 Safari1， 各 种 版 本 的 Opera 
和 Google 的 Chrome il iat. APA R arab A SATA, TEAR REP i, RAIE 
Five TWEENS ASRS, Aa RAB SLA AJER T I E M e EH AS EA ot H 
ake 














一 定 的 CSS 技巧 可 以 帮助 你 骗 过 浏览 器 的 CSS 解释 器 ， 通 过 这 种 方法 ， 可 以 绕 过 一 些 由 
CSS 引起 的 问题 。 但 是 要 注意 , 这 是 个 很 危险 的 方法 。 因 为 有 些 技巧 依赖 的 是 浏览 器 的 bug, 而 
那些 bug 最 终 古 会 被 修复 的 。 当 开发 者 习惯 了 IE6 MEMES Za, WASH CSS hack 来 让 
他 们 的 网 页 显示 正确 。IE6 已 经 6 年 没有 更 新 了 ， 于 是 当 微 软 发布 IE7 的 时 候 ， 很 多 人 发 现 他 们 
的 页 面 需 要 一 次 大 修 。 你 一 定 不 想 重 蹈 他 们 的 窗 辐 吧 ? 所 以 你 要 写 的 页 面 ， 应 该 是 在 未 来 仍然 可 
以 被 正确 至 现 的 页 面 。 





O RMR be at bug 的 技巧 被 称 做 CSS hack， 下 文 也 许 会 用 hack 这 个 单词 来 代表 CSS hack。 一 一 译 者 注 
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不 要 只 是 复制 代码 

不 要 照抄 从 网 上 找到 的 代码 | 虽然 在 互联 网 上 ， 你 能 找到 很 多 漂亮 的 CSS 代码 ， 但 是 
其 中 的 很 大 一 部 分 是 浏览 器 hack， 或 者 是 基于 其 他 你 不 熟 久 的 腾 断 编写 的 代码 。 我 想 ， 你 
肯定 不 希望 自己 开发 的 软件 中 有 自己 不 熟 双 的 代码 吧 。 在 使 用 那些 CSS Za, AMA IX 
Æ CSS 的 原理 是 什么 ， 就 像 你 在 写 程序 时 所 做 的 一 样 。 


11.2 CSS 基础 


CSS 是 Cascading Style Sheet ( 层 又 样式 表 ) 的 简称 ， 是 用 来 表述 HTML 文档 表现 形式 的 语 
言 。 大 多 数 人 在 涉足 网 络 开发 的 时 候 ， 都 是 用 CSS 来 改变 页 面 上 的 文字 外 观 的 。 

很 快 , 这 些 人 发 现 他 们 可 以 用 一 套 规则 来 确定 一 个 页 面 中 所 有 段落 的 样式 ， 而 无 需 单独 地 为 
数 百 个 页 面 中 的 每 个 段落 都 单独 设置 样式 。 

这 个 用 途 其 实 只 是 冰山 一 角 。 利 用 CSS, 你 可 以 为 文档 添加 色彩 和 图 片 ， 其 至 改变 整个 页 面 
的 布局 结构 。 本 章 中 ， 你 将 学 到 如 何 构建 Foodbox 的 布局 ， 如 何 将 之 前 设计 稿 中 的 样式 应 用 到 文 
档 的 不 同 区 域 中 。 

一 条 CSS 规则 主要 由 选择 符 (selector) 和 声明 (declaration) 组 成 ， 如 图 11-1 所 示 。 接 下 来 
我 们 会 详细 探索 关于 CSS 的 一 切 。 











选择 符 


/ 属性 

a 值 

p { Re 
color: #333333; 

vfs margin-bottom: 0; 
font-family: Arial, Helvetica, sans-serif; 
} 


11-1 CSS 规则 的 组 成 部 分 


11.2.1 选择 符 


ere ALE SM ae CRA AAA CSS 规则 。 选 择 符 可 以 是 html 标签 、id 或 者 


class, 
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不 同类 型 的 选择 和 从 


HTML 标签 选择 符 就 是 把 标签 的 尖 括 弧 去 掉 。 在 下 面 的 例子 中 ，hl 标签 的 颜色 会 是 监 色 的 : 


h1{ 
color:#009; 
} 


标签 p、h1 和 body 都 可 以 作为 HTML 标签 选择 符 。 
id 选择 符 总 以 井 号 (#) FA, MÆ HTML 标签 的 id 属性 。 下 面 的 代码 定义 了 id 是 
page 的 元 素 的 宽度 。 


#page{ 
width: 900px; 
} 


#page, #header 和 #footer 都 是 指向 id 的 选择 符 , 而 指 癌 class 的 选择 符 则 以 英文 句号 (.) 
开头 : 


.box{ 
border:1px solid #000; 
$ 


.box, .important 和 .newsitem 这 几 个 选择 符 后 面 的 规则 会 应 用 到 相应 的 元 素 中 。 
11.2.2 AR: 属性 和 值 


声明 定义 了 需要 添加 给 相应 选择 符 的 样式 ， 每 一 条 声明 都 确定 了 一 个 CSS 属性 的 值 。 如 末 
想 要 将 hl 标签 的 文字 颜色 变 成 红色 ， 只 需要 将 颜色 属性 〈color) 设 为 本 00 (红色 的 十 六 进 制 码 
人 简写)。 下 面 的 程序 片段 展示 了 用 法 : 


h1{ 
color:#F00; 
} 


AAR SP EE AME ae eA SFP, ie PEAS BRE. 如 果 在 一 个 
CSS 规则 中 有 很 多 声明 ， 那 么 你 可 以 像 这 样 把 它们 分 开 来 写 : 


h1{ 
font-size:24px; 
font-weight:bolder; 
color:#f00; 

} 


你 也 可 以 将 所 有 东西 写 在 一 行 : 


© 一 条 CSS 规则 中 最 后 的 分 号 可 以 省 略 ， 但 古 不 推荐 这 样 做 ， 因 为 之 后 你 可 能 会 在 规则 中 添加 新 的 声明 ， 而 饼 记 
了 那个 省 略 的 分 号 。 


11.2 CSS 基础 <q 133 
hi{font-size:24px; font-weight:bolder;color:#f00;} 
这 种 集中 在 一 行 的 写法 很 不 利于 阅读 , 但 是 没有 了 那些 多 余 的 空格 , 这 种 写法 会 省 下 不 少 带 
宽 。 可 能 在 开发 的 时 候 , 你 有 必要 保持 样式 表 的 格式 美观 。 在 开发 过 程 中 你 可 以 做 一 个 工具 用 来 
在 网 站 上 线 之 前 去 挥 那些 空格 和 回 车 ， 这 很 容易 。 而 且 你 也 可 以 对 HTML 做 同样 的 事情 ， 因 为 
它 对 空格 和 回 车 也 不 敏感 。 


11.2.3 KF “ER” 


没有 必要 在 一 条 规则 中 将 某 个 元 素 的 样式 全 部 定义 一 人 过, 你 可 以 将 这 些 声 明 分 散在 不 同 的 文 
件 中 。 男 外 ， 你 还 可 以 随时 随地 地 添加 内 岁 的 样式 或 者 页 面 级 别 的 样式 .: 


/* Set the line height */ 
p{line-height:18px;} 





/* set the color */ 
p{color:#003;} 


这 个 特性 让 你 能 够 以 功能 为 区 分 标准 ， 将 样式 表 打 散 。 你 可 以 用 一 个 CSS 文件 定义 页 面 布 
局 ， 另 外 一 个 文件 专门 定义 字体 和 颜色 。 

然而 ,那些 应 用 在 统一 元 素 上 的 不 同 规则 之 间 可 能 会 互相 冲突 。CSS 则 有 一 套 目 己 的 优先 级 
制度 ， 我 们 将 它 称 为 后 合 。 一 般 样式 表 有 三 个 来 源 ， 作者 Cates), AP (用 户 可 以 用 自己 
的 样式 表 取 代 你 的 ) FOU Geer BRU. LGA BE CSS 规则 赋予 了 不 同 的 权重 。 为 了 简单 
起 见 , 我 们 这 里 只 会 涉及 在 你 自己 定义 的 样式 表 中 发 生 冲 突 的 情况 , 而 不 会 涉及 太 多 用 户 为 浏览 
如 做 个 性 化 设置 而 市 来 的 不 同 效 坟 。 


你 写 的 样式 表 中 的 规则 权重 要 比 浏 览 细 或 者 用 户 的 高 ,但 古 你 写 的 这 些 样式 的 内 部 可 能 会 出 现 
邓 盾 。 理 解 层 倒 的 原理 可 以 帮助 你 避免 冲突 ， 同 时 在 必要 时 安全 地 覆盖 茶 些 样式 规则 。 





1. id 选 择 符 


id 选择 符 所 指定 的 元 素 很 明确 。 比 如 说 如 果 你 将 所 有 的 h2 标签 都 定义 为 监 色 字 ， 但 是 希望 
其 中 的 某 一 个 是 红色 ， 那 么 你 就 可 以 为 它 单独 设 定 一 个 id， 然 后 用 相应 的 id 选择 符 。 


css_layout/examples/01_selectors.html 








<h2>Products</h2> 
<h2>Clearance Items</h2> 
<h2 id="special_promotiton">Hot Deals! </h2> 


css_layout/examples/01_selectors.html 


h2{color:#00F; } 
#special_promotion{color:#FO0O; } 
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在 这 个 例子 里 ，Products 和 Clearance 会 是 蓝 色 的 ， 而 Hot Deals! 这 个 标题 则 会 是 红色 的 ， 


就 如 图 11-2 里 所 显示 的 一 样 。 通 第 情况 下 ，iid 选择 如 中 的 CSS 规则 会 履 盖 挥 其 他 所 有 的 规则 
定义 。” 
Products 


Clearance Items 


Hot Deals! 








11-2 我 们 用 id 选择 器 覆盖 了 别 的 规则 ， 从 而 让 标题 变 成 了 蓝 色 
2. class 选 择 器 


class 选择 器 比 一 般 的 HTML 标签 选择 右 的 优先 级 要 高 ， 但 是 比 不 上 id 选择 器 。 我 们 为 其 
中 一 个 标题 的 Class 属性 加 上 promo 来 看 看 效果 : 
css_layout/examples/02_selectors.html 


<h2>Products</h2> 
<h2 class="promo'">Clearance Items</h2> 
<h2 class="promo" id="Sspecial_promotion">Hot Deals! </h2> 


然后 再 为 这 些 标题 加 上 样 去: 
css_layout/examples/02_selectors.html 


h2{color:#00F; } 
#special_promotion{color:#FOO; } 
.promo{color:#0F0;} 


MÆ, Products 标题 变 成 了 蓝 色 ，Clearance 是 绿色 ， 最 后 的 Hot Deals! 还 是 红色 ， 如 图 11-3 
HR. class PAYER ese SF h2 里 的 规则 ， 但 是 id 选择 器 中 的 规则 得 以 保留 。 


Products 
Clearance Items 
Hot Deals! 


11-3 class 选择 絮 的 作用 体现 在 第 二 个 条 目 上 ， 把 它 变 成 了 绿色 ,但 是 它 并 没有 稚 盖 到 


第 三 个 条 目 上 ， 因 为 id 选择 器 里 的 规则 不 能 被 class 选择 器 中 的 规则 重 载 


@ 其 实用 class 会 更 好 ， 因 为 id 在 一 个 页 面 上 是 唯一 的 。 
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3. 顺序 很 重要 


如 琳 没 有 优先 级 更 高 的 规则 ， 层 登 机 制 会 选用 最 新 定义 的 样式 加 以 应 用 。 利 用 这 条 规则 ,你 
可 以 在 每 页 或 者 每 个 元 素 上 重 写 CSS 样式 ， 这 也 是 为 什么 CSS 如 此 好 用 的 重要 原因 之 一 。 通 季 
多 个 页 面 共用 一 个 样式 表 ， 而 训 览 右上 只 要 发 现 一 个 能 用 的 样式 ， 融 会 将 它 加 载 到 元 素 上 。 了 解 其 
中 的 规律 可 以 让 你 获得 极 大 的 灵活 性 。 

我 们 用 例子 来 说 明 。 比 如 标题 相关 的 CSS 样式 是 这 样 的 : 


css_layout/examples/03_selectors_page_style.html 


h2{color:#00F;} 
#special_promotion{color:#FOO; } 
.promo{color:#0F0;} 


然后 你 在 页 面 上 加 入 了 如 下 的 新 样式 : 


css_layout/examples/03_selectors_page_style.html 








#special_promotion{color:#FFO; } 


在 页 面 上 的 CSS 规则 的 优先 级 要 高 于 在 样式 表 文 件 中 设置 的 CSS 规则 ， 因 为 这 相当 于 再 次 
定义 规则 。 在 图 11-4 中 ，Hot Deals! 这 个 标题 显示 的 是 黄色 ， 而 不 是 红色 。 


Products 
Clearance Items 


Hot Deals! 





11-4 我 们 把 Hot Deals XMM EEL TAR, OUT AS TH BLS BK E HH 


要 记 住 CSS 样式 表 文 件 整 体 不 会 受 这 种 冲突 的 影响 ， 只 有 其 中 个 别 的 声明 会 波及 。 

在 这 一 章 中 ,我 们 会 时 常用 到 这 种 重 定义 的 方法 。 但 是 大 多 数 情况 下 ， 我们 还 是 会 尽 可 能 地 
将 相同 的 规则 整合 起 来 。 我 们 的 最 终日 的 是 将 结构 和 样式 分 开 ， 而 并 不 是 为 了 宪 盖 而 覆盖 。 

4. !important 的 重要 性 


有 些 时 候 你 需要 改变 CSS 解析 的 规则 来 实现 目 己 想 要 的 效果 。CSS 提供 了 !important 关键 
字 让 层 登 机制 执 行 一 些 规则 ， 忽 略 抒 本 来 的 优先 级 顺序 。 在 11.2 市 中 讲 到 class HF as ATT, 
Class promo Hifk zr HAJALI A Reret id special_promotions 选择 绢 中 的 规则 , 因为 id 选择 大 
的 优先 级 最 高 。 但 是 ， 我 们 可 以 在 promo 规则 的 某 些 声明 的 后 面 加 上 1!important 关键 字 ， 强 制 以 最 
高 优先 级 执行 这 条 规则 。 
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css_layout/examples/04_selectors_important.html 


h2{color:#00F; } 
#special_promotion{color:#FOO; } 
.promo{color:#0FO !important; } 


这 下 Hot Deals! 标 题 变 成 了 绿色 ， 如 图 11-5 所 示 。 
Products 
Clearance Items 


Hot Deals! 


11-5 A! important 关键 字 来 踢 制 覆盖 之 前 的 规则 


11.3 浏览 器 如 何 解析 CSS 


你 应 该 已 经 学 会 了 如 何 定义 样式 ， 现 在 你 需要 了 解 的 是， 从 训 览 右 的 角度 看 ,， 征 怎 样 处 理 样 
去 规则 的 。 请 求 一 个 页 面 的 时 候 ， 训 览 代 会 开始 解析 HTML HERA. QO ER Te h 
到 样 么 规则 , 或 者 是 对 样式 表 文 件 的 引用 , 训 览 供 会 在 至 现 页 面 的 过 程 中 在 页 面 上 应 用 这 些 规则 。 
在 页 面 上 ， 一 共有 三 种 方式 ?| 用 样式 表 。 


11.3.1 BAT 


所 有 的 HTML free ebA—* style 属性 ， 在 声明 一 个 元 素 的 时 候 ， 你 可 以 利用 这 个 属性 来 
定义 CSS: 

<hl1 style="color:#f00;font-size:18px;">Welcome</h1> 

开发 者 设计 帮助 功能 或 标签 库 的 时 候 经 第 会 用 到 这 种 方式 。 虽 然 这 种 方式 看 起 来 很 方便 , 但 
实际 上 它 是 三 种 方法 中 最 糟糕 的 一 种 ， 请 想象 以 下 的 情况 : 


<h3>Services</h3> 
<ul> 
<li style="color:#300;">Computer repair</li> 
<li style="color:#300;">Small business networking support</li> 
<li style="color:#300;">Computer hardware sales</li> 
<li style="color:#300;">Web development</1i> 
</ul> 


你 重复 写 了 同一 个 声明 ,增加 了 HTML 文 档 的 代码 量 ,， 同 时 还 造成 了 样式 信息 无 法 重用 的 后 
果 。 如 果 这 个 列表 会 出 现在 多 个 页 面 上 ， 那 么 你 不 得 不 将 这 条 声明 多 次 。 而 且 ， 如 末 你 的 客户 突 
然 硕 望 将 颜色 从 红色 改 成 赣 色 ， 那 你 就 需要 改动 无 数 的 地 方 。 而 这 种 内 容 和 设计 混杂 的 情况 , 也 
ER- Eis SE SEY 
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但 是 这 种 写法 也 不 是 一 无 是 处 。 有 的 时 候 , 在 一 些 特 定 的 页 面 上 , 芭 些 特定 的 元 素 需 要 微调 ， 








而 你 又 不 愿意 把 这 个 小 小 的 改动 放 进 全 局 共用 的 样式 表 中 ， 此 时 这 种 写法 就 派 上 用 场 了 。 也 就 是 
说 ， 不 要 滥用 这 个 技术 。 后 台 程 序 员 喜 欢 这 样 写 . 
<?php 
echo ‘<p style="font-size:18px;color=' . $color . ';">' . $description + '</p>'; 
?> 





乍 一 看 ,这 种 写法 是 个 不 错 的 技巧 , 但 是 这 种 写法 也 让 事后 对 颜色 的 修改 变 得 异常 困难 。 
为 样式 表 改 起 来 很 简单 , 但 是 修改 后 人 台 代 码 就 很 困难 了 。 你 最 好 别 用 这 种 方式 写 CSS, 这 样 不 好 。 
实际 上 ， 这 就 跟 用 Comic Sans 字体 一 样 糟 料 。 虽 然 这 种 写法 看 起 来 很 有 吸引 力 ， 但 古 你 应 该 用 
一 个 class HACE, WR PAE: 

<?php 


echo ‘<p class="description">' . $description + '</p>'; 
?> 


然后 在 文档 的 其 他 地 方 定 义 description 类 ， 改 变 文字 外 观 ， 同 时 也 不 会 影 啊 后 台 代 码 。 
11.3.2 style 标签 
HTML 中 有 一 个 style 标签 ， 能 让 你 在 文档 的 头 部 定义 完整 的 样式 表 : 


<style> 
body{ 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px; 
line-height: 18px; 
} 


h1l{font-size:18px; line-height: 36px; } 
h2{font-size:16px; } 
h3{font-size:14px; } 


#page{ 
width: 900px; 
l; 


</style> 

如 有 有 些 页 面 需要 目 主 独立 的 样式 ， 这 个 方法 显然 是 再 适合 不 过 了 。 但 是 问 题 也 同样 明显 ， 
IR EMIDARA RI SEHE, 这 个 写法 也 是 将 内 容 和 样式 混杂 在 一 起 了 , 同时 这 些 页 面 的 样式 
也 不 能 被 其 他 页 面 共 用 。 

当 你 头 一 次 将 茶 些 模板 写成 CSS 规则 的 时 候 ， 这 种 写法 是 很 适合 的 ， 因 为 你 不 需要 创建 多 
余 的 文件 。 写 完 之 后 ， 这 些 在 style 标签 内 的 CSS 代码 可 以 被 剪 切 、 粘 贴 到 一 个 独立 的 CSS 文 
件 中 ， 然 后 为 其 他 页 面 所 用 。 
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V FE 
也 ha 怎么 回 事 ? 我 以 为 颜色 都 是 6 个 数字 的 呢 

当 每 一 对 数字 都 由 两 个 重复 的 数字 组 成 时 ,CSS 提供 了 一 种 简写 的 方法 。 比 如 红色 的 闫 

色 代 码 是 # 丁 F0000， 这 个 代码 表示 : 红色 加 满 ， 绿 色 和 蓝 色 一 点 都 不 加 。 这 里 因为 F、0 和 0 

都 重复 出 现 了 ,所 以 你 可 以 将 它 简 写成 #00。 简 单 说 来 , 这 又 是 一 种 减少 文档 中 文字 数量 的 


11.3.3 ”外 部 CSS 文 件 


link 标签 可 以 让 你 在 HTML 文档 中 引入 外 部 的 样式 表 ， 束 像 3| 入 外 部 JavaScript 文件 一 
样 。 网 站 用 户 的 浏览 絮 会 下 载 这 些 文件 , 然后 将 样式 加 载 到 页 面 上 。 如 果 你 有 多 个 页 面 共 用 一 个 
文件 ， 用 Tink 引入 外 部 文件 可 以 大 大 增强 用 户 的 体验 ， 因 为 你 只 需要 将 页 面 内 容 发 送 到 用 户 端 
meat T, CSS 文件 只 需要 传送 一 次 束 可 以 了 。 


大 体 上 来 说 , 这 是 使 用 样式 表 的 最 好 方法 ,这 也 是 在 本 革 中 会 一 直 使 用 的 方式 。 其 他 两 种 方 
法 则 适用 于 单独 页 面 样式 的 偶尔 做 调 。 


11.4 ”创建 并 链接 新 的 CSS 样式 表 


打开 文本 编辑 右 ， 创 建 一 个 新 的 文档 。 将 这 个 文档 保存 到 stylesheets 文件 夹 里 ， 取 名 为 
layout.css。 在 这 个 文件 里 ， 会 定义 页 面 上 所 有 跟 布 局 和 对 齐 相 关 的 东西 。 之 后 ， 会 把 字体 和 颜色 
的 相关 规则 放 在 另外 一 个 文件 里 面 。 

然后 关闭 那个 文件 。 这 次 不 会 用 文本 编辑 绢 去 写 CSS， 而 是 使 用 Firefox pil bias HY Web 
Developer 工具 栏 。 

打开 首页 HTML 文件 ， 在 <head>…</head> 区 域内 添加 如 下 代码 : 


<link rel="stylesheet" href="stylesheets/layout.css" 
type="text/css" media="screen" charset="utf-8" /> 


上 面 的 代码 是 一 个 链接 外 部 样式 表 的 示例 ， 里 面 用 到 了 一 个 相对 链接 指向 stylesheets 文件 夹 
中 的 layout.css 文件 。 跟 img 标签 类 似 ，1ink 标签 中 的 链接 可 以 是 相对 于 根 目录 “/ 的 相对 链接 ， 
也 可 以 是 一 个 连接 到 服务 左 其 他 位 置 的 绝对 链接 。 


样式 表 可 以 指定 显示 方式 。 举 个 例子 来 说 ， 你 可 以 指定 基 个 样 慌 表 只 在 页 面 显 示 于 屏幕 之 上 
的 时 候 应 用 ， 也 可 以 指定 它 在 网 页 打印 的 时 候 应 用 。 这 为 设计 打印 版 本 或 者 移动 版 本 的 网 页 提供 
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了 便利 。 换 句 话 说， 就 是 不 要 大 依赖 于 media 这 个 属性 。 通 篆 浏 览 如 负 责 解析 这 些 东 西 。 但 是 有 
些 浏 览 器 并 不 会 这 样 做 ， 比 如 屏幕 陪读 器 或 其 些 移动 设备 上 的 浏览 器 。 因 此 你 一 定 要 经 党 做 测试 。 


11.5 定义 基本 结构 、 页 头 和 页 脚 


在 Firefox W bi ais FFT FF index.html 文件 。 此 时 ,整个 页 面 没 有 任何 样式 , 但 是 仍然 是 可 用 并 
且 可 读 的 。 这 就 是 页 面 在 一 个 不 支持 样式 表 或 者 是 基于 文字 的 浏 贤 絮 中 打开 时 的 显示 形态 。 现 在 
让 我 们 利用 Web Developer 工具 栏 为 它 带 来 一 些 改变 ， 因 为 在 Web Developer 中 做 出 的 改动 可 以 
实时 地 显示 出 来 。 

同时 按 住 Ctrl+Shift+E， 或 者 从 菜单 CSS 中 选择 Edit CSS (编辑 CSS)， 启 动 CSS 编辑 器 
编辑 颖 面板 通常 在 浏览 器 底部 出 现 。 单 击 面板 中 Position (位 置 ) 按钮 ， 将 编辑 如 从 拖 让 到 文档 
的 左 侧 。Position 按钮 在 Edit CSS 标签 的 右 侧 。 

无 论 是 在 页 面 的 head 标签 内 ,还 是 在 独立 的 样式 表 文 件 中 添加 的 CSS 代码 都 会 出 现在 编辑 
絮 中 ， 然 后 就 可 以 修改 它们 。 但 是 现在 ， 我 们 面 对 的 是 一 个 空白 的 画布 。 


11.5.1 浏览 器 默认 


每 个 训 览 磺 都 会 以 各 目的 方式 显示 页 面 : 或 者 是 不 同 的 外 边 距 (margin)， 或 者 是 不 同 的 行 
间 跑 、 字 体 大 小 ， 黄 至 还 会 有 颜色 的 不 同 。 这 些 对 定义 行 高 和 其 他 元 素 造成 了 困难 。 但 是 通过 在 
CSS 中 将 一 切 清 老 ， 可 以 绕 过 这 些 默 认 值 之 来 的 麻烦 ， 至 少 这 种 方法 适合 大 部 分 主流 的 辛 蜗 右 
将 下 面 的 规则 添加 到 CSS 编辑 如 中 ， 可 以 看 到 行 与 行 之 间 的 则 际 消 失 了 : 

css_layout/layout.css 


body, p, h1, h2, h3, h4, h5, h6, ul, 11, form, 
margin:0; 
padding:0; 
line-height:18px; 

} 











p, h2, h3, h4, h5, hot 
margin-bottom:18px; 
} 


上 面 第 一 条 规则 移 去 了 页 面 所 有 元 素 周 围 的 外 边 距 (margin， 指 的 是 元 素 周 围 的 留 白 ) 和 内 
边 距 (padding， 指 的 是 元 素 内 部 的 留 白 ) 。 同 时 ， 还 将 行距 设置 成 18 像素 ， 重 载 了 浏览 如 默认 
的 行 高 值 。 

第 二 条 规则 将 段落 和 标题 的 底部 外 边 距 设置 为 18 像素 ， 这 个 规则 帮助 我 们 将 所 有 的 元 素 都 
和 网 格 对 齐 。 
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经 常 保存 


你 应 该 懂得 经 第 保存 文件 的 道理 ， 但 是 在 Firefox 浏览 器 的 CSS 编辑 器 中 ,保存 文件 这 


个 动作 需要 更 加 频繁 。 跳 转 到 其 他 页 面 或 者 是 刷新 本 页 面 都 有 可 能 将 CSS 文件 重 置 ， 导 致 
你 的 改动 全 部 丢失 。 虽然 实时 显示 改动 是 一 件 很 好 的 事情 , 但 是 可 能 你 中 意 的 传统 文字 编辑 
器 会 让 你 感觉 更 舒服 些 ， 





共享 规则 


选择 符 可 以 放 在 一 个 小 组 里 , 这 个 小 组 里 的 所 有 选择 符 都 会 共用 一 套 规则 。 虽 然 这 一 步 并 不 
古人 必要 的 ， 但 这 是 一 种 减少 文档 中 代码 量 的 好 方法 。 参 看 以 下 规则 : 
pi 


line-height:18px; 
} 


h2{ 
line-height:18px; 

f 

h3{ 
line-height:18px; 

} 


在 规则 中 ， 可 以 用 逗号 分 隔 选 择 强 ， 这 样 可 以 将 一 个 规则 应 用 到 多 个 元 素 上 : 


p, h2, h3{ 
line-height:18px; 
} 


更 少 的 代码 意味 着 更 快 的 传输 速度 。 但 古 要 记 住 ， 这 样 的 措施 在 让 代码 的 体积 变 小 的 同时 ， 
也 让 组 织 代码 变 得 困难 一 些 。 


W 小 乔 爱 问 
过 可 以 用 从 网 上 找到 的 现成 的 CSS 样式 表 吗 


可 以 是 可 以 ， 但 是 我 不 建议 不 加 修改 地 直接 使 用 它们 。 还 记得 11.1 节 的 框 注 “不 要 只 
是 复制 代码 !” 吗 ? 你 可 以 看 看 Eric Meyer 做 的 很 受 欢 迎 的 预 置 样式 表 ,， “虽然 这 些 看 起 来 很 
好 用 ,要 记 住 这 些 预 置 的 样式 表 是 以 普 适 性 为 目的 设计 的 , 其 中 可 能 包含 了 大 量 你 用 不 到 的 
元 素 。 写 样式 时 ， 你 最 好 是 做 到 自己 给 自己 预 置 元 素 。 





®© http://meyerweb.con/eric/tools/css/reset/ 。 
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11.5.2 EFRA! 


HTML 中 每 一 个 块 元 素 基 本 上 都 可 以 看 成 一 个 盒子 ， 这 个 盒子 的 宽 和 高 ， 外 加 内 边 距 、 边 杠 
粗细 和 外 边 距 这 些 东西 ， 决 定 了 元 素 的 尺寸 。 如 果 定 义 了 一 个 宽 50 像素 的 盒 模型 (box model), 
为 它 的 每 一 边 都 设 定 了 2 像素 的 内 边 距 ， 还 有 1 像素 宽 的 边框 ， 另 外 左右 各 有 5 像素 的 外 边 距 ， 
那么 这 个 元 素 的 宽 将 会 是 50+2+2+1+1+5+5, 也 就 是 66 像素 。 如 果 你 打算 将 这 样 一 个 元 素 放 进 页 
面 上 一 个 50 像素 宽 的 地 方 ， 那 么 这 种 计算 就 显得 非常 有 必要 了 。 

不 同类 型 的 盒 模型 

浏览 器 标准 的 不 统一 又 给 开发 者 带 来 了 问题 。 多 少年 来 , 浏览 器 一 直 在 用 自己 的 独特 算法 
来 解析 盒 模型 。 它 将 边框 和 内 边 距 当 作 内 容 的 宽度 计算 ,也 就 是 说 我 们 声明 的 区 域 里 用 来 放 内 容 
的 宽度 只 有 44 像素 (50-2-2-1-1)。 你 可 以 想象 ， 这 会 造成 多 大 的 问题 。 

IE6 和 IE7 采用 了 针对 盒 模型 宽度 的 标准 算法 ， 但 是 只 有 在 浏览 器 用 标准 模式 呈现 的 时 候 才 
会 激活 这 种 算法 。 也 就 是 说 ， 它 们 默认 的 模式 还 是 那个 奇怪 的 模式 ， 用 到 的 是 老 旧 的 算法 。 你 可 
以 将 这 种 奇怪 的 模式 看 成 是 向 后 兼容 的 模式 。 但 是 我 还 是 会 把 它 当 成 一 种 令 人 头疼 的 东西 。 

还 好 ， 用 合适 的 文档 类 型 (doctype) 设置 和 字符 编码 设置 可 以 让 TE 在 标准 模式 下 运行 ， 在 
我 们 的 HTML 模板 中 已 经 解决 了 这 个 问题 ， 所 以 不 会 被 任何 元 素 的 宽度 问题 所 困扰 


11.5.3 AA 


在 Photoshop 里 制作 布局 的 时 候 ， 我 们 将 页 面 的 宽度 设 为 900 像素 。 现 在 ， 我 们 了 解 了 页 面 
的 宽度 应 该 等 同 于 广 览 如 的 宽度 ,然而 我 们 并 没有 设计 一 个 随 放 咒 带 宽度 强 放 的 流体 布局 ， 所 以 
将 利用 CSS 单独 确定 页 面 的 宽 。 

index.html 中 有 一 个 id 是 page 的 div 标签 ， 它 将 页 头 、 页 脚 和 页 面 中 部 区 域 都 赛 括 其 中 。 
我 们 会 用 下 面 的 两 个 属性 来 确定 这 个 div 的 宽度 。 


css_layout/layout.css 




















#page{ 
display:block; 
width: 900px; 
margin: Opx auto; 
} 
这 一 条 规则 将 这 个 元 素 的 宽 设 为 900 像素 ， 还 确定 了 它 顶 部 和 底部 的 margin 是 0 像素 ， 同 


时 左右 的 margin 会 自动 生成 数值 。 


这 个 规则 的 元 长 写法 如 下 : 
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margin-top:0; 
margin-right: auto; 
margin-bottom:0; 
margin-left: auto; 


但 是 ， 在 定义 外 边 距 的 时 候 ， 我 们 可 以 用 下 面 的 简短 模式 : 

margin:Opx 5px 5px Opx 

这 行 代码 定义 了 在 元 素 上 方 、 右 面 、 瓜 部 和 左面 的 外 边 距 。 初 见 这 个 写法 可 能 会 贰 得 有 些 
怪 ， 然 而 你 可 以 将 之 比 作 钟 面 的 布局 ，12 在 最 上 、3 在 右面 、6 在 底部 、9 在 左面 。 

如 朱 碰 到 我 们 这 个 例子 里 的 情况 ， 你 其 至 可 以 进一步 压缩 这 行 代码 。 你 可 以 用 margin:0 这 
种 形式 来 议定 四 个 方位 的 外 边 中 。 你 会 彰 毅 看 到 这 种 缩写 ， 因 为 这 会 减少 字符 的 数量 ， 从 而 菠 省 
页 面 的 下 载 时 间 。 

在 把 这 些 代码 放 到 编辑 硝 后 ,应 该 马上 束 能 看 到 结 末 。 现 在 页 面 应 该 是 在 训 览 合 里 居中 显示 
了 。 这 也 是 一 个 保存 文档 的 好 时 机 。 单 击 CSS 编辑 如 中 的 保存 按钮 ， 将 这 个 样式 表 保 存在 项 目 
文件 夹 的 stylesheets 文件 夹 中 ， 命 名 为 layout.css, 


11.5.4 定义 页 头 和 页 脚 


页 头 和 页 脚 的 宽度 都 和 页 面相 等 , 但 是 它们 的 高 度 和 文字 对 齐 方式 不 同 。 从 样式 页 中 可 以 看 
到 页 头 的 高 度 是 108 像 率 。 将 以 下 的 代码 加 入 CSS tiar 


css_layout/layout.css 





Eb 








#header{ 
height: 108px; 
width:100%; 


w 





这 条 声明 定义 了 我 们 要 求 的 高 ， 同 时 将 元 素 的 宽 设 为 100%。 你 可 能 会 认为 这 里 的 意思 是 占 
据 整个 屏幕 宽 ,， 但 实际 上 它 的 意思 是 占据 它 的 父 元 素 宽度 的 100%, 在 这 里 就 是 page 元 素 的 900 
(RAAT 
定义 页 脚 的 声明 几乎 是 一 样 的 ， 唯 一 的 改变 是 需要 将 高 度 设置 为 36 像素 : 


css_layout/layout.css 





#footer{ 
width:100%; 
height: 36px; 
Í 


11.6 ”将 页 面 的 单 栏 变 成 双 栏 
至 此 ， 我 们 的 页 面 还 没有 什么 特别 的 地 方 ， 但 是 好 戏 即 将 上 演 。CSS 的 一 大 特色 就 是 它 
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BE US Ac SRA OU “ie” 中 剥离 出 来 ， 并 且 将 它们 重新 排 位 。 我 们 的 页 面 有 一 个 侧 辽 
栏 ， 以 及 和 这 个 侧 边 栏 并 排 的 另 一 栏 。 我 们 会 用 一 个 叫做 妨 浮 (floating) 的 简单 技巧 来 实现 
这 种 效 坟 。 


11.6.1 文档 流 


在 9.4.6 刷 的 框 注 “ 块 元 泰和 内 联 元 素 ” 中 ， 你 应 该 已 经 理解 了 元 素 的 不 同 显 示 方 式 : 块 元 
素 、 内 联 元 素 或 者 不 可 见 元 素 。 了 解 这 些 差异 ， 可 以 让 你 在 布局 中 充分 利用 CSS 的 特点 。 例 如 ， 
div 标签 是 一 个 块 元 素 ， 训 览 华 在 试图 主 现 这 个 元 素 的 时 候 ， 会 让 它 另 起 一 行 ， 并 且 占 请 这 一 行 
所 剩 下 的 所 有 空间 。 然 而 ， 可 以 利用 CSS 里 的 display 属性 来 改变 这 个 过 程 : 


#page{ 
display:inline; 


f 

display 属性 有 数 个 可 以 选择 的 值 ， 我 们 现在 只 关心 其 中 的 三 个 : 首先 是 block， 这 个 值 可 
以 让 元 素 以 块 元 素 的 形式 被 呈现 ， 然 后 是 in1ine， 这 让 元 素 以 内 联 元 素 的 形式 呈现 ， 另 外 还 有 
none， 这 个 值 将 元 素 从 文档 中 移 除 。 


11.6.2 ”浮动 


在 读 杂 志 、 报 纸 或 者 教科 书 的 时 候 ， 你 会 看 到 文字 很 精巧 地 浮动 在 图 片 周围 。 可 以 用 CSS 
中 的 序 动 属性 来 达到 这 个 目的 , 也 可 以 用 这 个 方法 来 让 元 素 并 排 排 列 ， 让 它们 看 起 来 像 两 列 文字 
的 布局 。 

将 一 个 元 素 设 定 为 浮动 ， 意味 着 将 这 个 元 素 从 文档 的 “ 流 ” 中 单独 拿 出 来 ， 然 后 页 面 中 剩 下 
的 内 容 会 将 这 个 元 素 围 绕 起 来 。 如 琳 让 两 个 挨 着 的 元 素 都 变 成 浮动 , 你 就 得 到 了 所 需要 的 双 栏 布 
局 的 效 末 ， 当 然 还 需要 给 两 个 元 素 分 别 设 定 宽度 。 

看 看 这 个 简单 的 结果 ， 有 两 个 拥有 内 容 的 div 标签 ， 其 中 一 个 是 被 提出 来 的 “ 盒 ” ， 另 外 一 
FER PER MFA 


css_layout/float_wrap.html 

















<div class="callout"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
</div> 
<div class="content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
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irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. </p> 

</div> 


可 以 让 主要 文字 内 容 环 绕 在 被 单独 提出 的 文字 四 周 ， 只 需要 为 那个 单独 的 “ 盒 ” 加 上 浮动 
属性 : 


css_layout/float_wrap.html 


.callout{float: left; width:108px; } 


得 到 的 效 末 看 起 来 就 跟 图 11-6 一 样 。 然 而 ， 如 采 给 相 邻 的 两 个 区 域 都 加 上 Float 属性 ， 它 
们 就 会 以 列 的 形式 排列 起 来 ， 如 图 11-7 所 示 。 


Lorem ipsum dolor sit amet, consectetur 
Loremipsum adipisicing elit, sed do eiusmod tempor 
dolor sit amet， incididunt ut labore et dolore magna aliqua. 
consectetur Ut enim ad minim veniam, quis nostrud 
adipisicing elit. exercitation ullamco laboris nisi ut aliquip ex 

ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum. 





图 11-6 一 个 单独 的 浮动 元 素 让 其 他 内 容 围 绕 在 它 四 周 
css_layout/float_columns.html 


.callout{float: left; width:108px; } 
.content{float: left; width: 400px; } 


Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

dolor sit amet, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 

consectetur enim ad minim veniam, quis nostrud exercitation ullamco 

adipisicing elit. laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum. 


图 11-7 ”两 个 相 邻 的 浮动 元 素 形成 了 两 列 


为 了 创建 侧 边 栏 和 侧 边 栏 区 域 ， 需 要 将 侧 边 栏 和 主要 区 域 都 设 为 浮动 。 在 HTML 代码 中 ， 
这 两 个 区 域 被 一 个 叫做 middle 的 区 域 所 包含 。 


将 middle 区 域 设置 为 100% 宽 。 如 和 你 不 这 样 做， 区 域 中 的 元 素 可 能 不 会 如 你 所 愿 的 那样 
扩展 : 
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css_layout/layout.css 


#middlef{ 
width:100%; 
Float: left; 
} 


然后 定义 侧 边栏 。 根 据 样式 页 ， 侧 边栏 的 宽 是 306 像素 (注意 网 格 线 !)。 人 loat:1eft 属性 
让 这 个 元 素 处 于 最 左边 的 位 置 ， 并 且 其 他 元 素 会 环绕 在 它 周围 。 在 CSS 编辑 右 中 写 下 这 些 代 码 
后 ， 你 会 立刻 看 到 侧 边 栏 浮动 到 了 左边 : 


css_layout/layout.css 








#middle #sidebar{ 
width: 306px; 
Float: left; 


} 

当然 ， 你 并 不 希望 main 区 域 环绕 在 侧 边 栏 周 围 ， 你 需要 这 两 个 区 域 看 起 来 是 两 栏 。 最 简单 
的 解决 方式 就 是 让 main 区 域 也 是 同 左 浮动 的 ， 然 后 给 这 个 区 域 设 置 一 个 合适 的 宽 。 这 个 宽度 应 
该 是 页 面 宽 减 去 这 一 行 中 所 有 其 他 元 素 的 宽 ， 以 及 它们 的 外 边 中 、 边 框 或 者 内 边 距 。 别 傻 算 了 ， 
答案 应 该 是 594 像素 。 跟 那 张 从 Photoshop HH ACA I RE A ae EA KS 
SRE main xX tk: 





css_layout/layout.css 


#middle #main{ 
width: 594px; 
Float: left; 


} 
现在 我 们 看 到 ， 所 有 在 Photoshop 中 花费 的 时 间 邦 之 来 了 回报 1! 


这 两 条 CSS 规则 都 有 缩小 范围 选择 符 。 当 选择 符 中 出 现 空格 的 时 候 ， 我 们 实际 上 是 在 缩小 
选择 符 的 范围 。 在 #middle #sidebar 这 个 例子 里 , 选择 符 的 意思 是 说 : id 是 sidebar 的 元 素 ， 
是 id 为 middle 元 素 的 下 级 。id 在 页 面 中 是 唯一 的 , 所 以 缩小 沱 围 在 这 里 并 役 有 什么 显 堵 的 效 
果 ， 只 是 为 了 组 织 代 码 和 可 读 性 准备 的 。 但 是 在 后 面 的 例子 中 ， 缩 小 范围 是 个 很 有 用 的 技巧 ， 
如 下 所 示 : 


a{color:#339;} 
#sidebar a{color: #fff;} 


有 了 这 些 规则 , 在 侧 边栏 中 的 链接 的 颜色 会 有 别 于 页 面 中 的 其 他 链接 。 如 采 侧 边栏 的 背景 颜 
色 比 主 区 域 要 瞳 很 多 ， 你 就 应 该 试 试 这 个 方法 。 
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11.6.3 ”背景 颜色 和 浮动 


WAT div POMA TIRAR T x, Firefox AFC SP PN EHUB as LR A 
这 个 div 添加 任何 背景 颜色 和 边框 。 实 际 上 ， 这 个 div 的 高 度 会 “十 塌 ” 一 一 也 就 是 说 这 个 div 
的 背景 图 片 、 边 框 或 者 背景 颜色 都 是 不 可 见 的 ， 看 看 如 下 代码 : 


<div id="container"> 
<div id="col1"> 
<p>foo</p> 
</div> 
<div id="col2"> 
<p>bar</p> 
</div> 
</div> 


#container{ 
background-color: #ffe; 

} 

#coll{ 
float:left; 
width:400px; 

} 

#coll{ 
float:left; 
width:400px; 
background-color: #eee; 


} 





在 这 个 例子 中 ,你 看 到 的 是 两 坚 栏 被 包含 在 一 个 容 硕 中， 每 个 紧 栏 都 是 序 动 的 ， 这 就 会 造成 
容器 十 塌 ， 也 就 是 说 容器 中 的 育 景 色 不 会 被 显示 。 解决 方法 虽然 简单 ,但 是 也 没有 那么 明显 : 你 


需要 将 容器 也 变 成 浮动 的 。 一 旦 容器 变 成 浮动 的 ， 背 景色 也 就 可 以 显示 出 来 了 。 


另外 一 个 解决 方案 是 在 容 右 div 关闭 之 前 ， 加 上 一 些 其 他 的 元 素 ， 比 如 一 个 换行 符 ， 然 后 为 
这 个 元 率 加 上 清除 序 动 的 属性 : 


<div id="container"> 








<br class="clear" /> 
</div> 


.clear{ 
clear:both 


} 





© 不 要 太 担 心 IE 中 不 太 引 人 注意 的 “ 双 外 边 距 ”的 bug, XA bug 是 说 两 个 相 邻 的 浮动 元 素 会 产生 多 余 的 外 边 距 。 
第 15 章 会 讲 到 这 个 问题 。 
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这 两 种 方法 效 朱 都 很 好 , 但 是 后 面 的 那个 方法 需要 你 写 额 外 的 标签 来 解决 问题 。 如 采 你 在 目 
己 的 页 面 设 计 中 遇 到 了 这 个 问题 ， 采 取 什 么 方法 和 都 可 以 。 


如 果 你 将 相关 的 选择 器 分 成 组 并 且 缩 进 元 素 ， 那 么 CSS 代码 的 可 读 性 会 好 很 多 ,例如 
以 下 的 代码 就 很 容易 阅读 : 


#navbar { 
height: 36px; 
margin-bottom: 24px; 
} 
#navbar ul { 
margin: 0; 
padding: 0; 
list-style: none; 
i 
#navbar ul li { 
float: left; 
margin-right: 20px; 
} 


#middle{ 
width:100%; 
} 


但 是 接 下 来 的 这 些 代码 就 没有 上 面 的 容易 读 懂 了 : 


#navbar { 
height: 36px; 
margin-bottom: 24px; 

} 

#navbar ul { 
margin: 0; 
padding: 0; 
list-style: none; 

} 

#navbar ul li { 
float: left; 
margin-right: 20px; 


} 

#middle{ 
width:100%; 

} 


虽然 区 别 看 起 来 微不足道 ,但 是 这 种 缩 进 带 来 的 视觉 上 的 引导 可 以 让 你 更 容易 查找 想 
寻找 的 东西 。 





148 > 第 11 章 使 用 CSS 布局 


11.7 为 内 容 加 上 外 边 距 


基本 的 结构 已 经 其 不 多 了 ,但 古 看 起 来 页 面 还 是 不 太 可 读 。 我 们 去 挥 了 大 多 数 元 素 的 外 边 
距 ， 现 在 该 将 外 边 距 加 回去 了 。 从 侧 边 栏 中 的 元 素 开始 ， 把 所 有 元 素 的 外 边 中 都 设 为 18 像素 
的 倍数 。 


快速 格式 化 侧 边栏 元 素 


所 有 侧 辽 栏 中 的 元 素 都 有 相同 的 结构 : 都 征 身 处 父 元 素 中 的 子 元 素 。 都 有 标题 ， 芭 接着 你 题 
就 是 内 容 。 在 11.5 市 中 ， 设 定 了 标题 的 默认 外 边 距 (18 像素 )。 现 在 需要 单独 为 这 些 区 域 定 义 外 
边 距 














css_layout/layout.css 
#browse_recipes, #popular_ingredients, #search{ 
margin-left: 18px; 
margin-right:18px; 
margin-top: 18px; 
Í 
ILA AS MIA A CARRE ANAE T o 我们 将 侧 边 栏 中 的 元 素 都 加 上 左边 、 右 边 和 
上 方 的 18 像素 外 边 距 ， 用 来 规整 这 些 元 素 。 这 里 最 需要 注意 的 是 三 个 元 素 共 用 了 这 些 声 明 。 在 
任何 可 能 的 时 候 ， 只 要 看 起 来 合理 ， 你 都 应 该 这 样 写 CSS。” 


11.8 EK 


主 区 域 由 一 张 意大利 面 的 图 片 、 一 个 双 栏 布局 和 另外 一 个 单 栏 布局 组 成 。 其 中 意大利 面 的 
图 片 不 需要 任何 CSS 样式 ， 至 于 其 他 的 元 素 ， 你 可 以 使 用 刚刚 学 到 的 模式 来 完成 。 唯 一 需要 特 
别 注意 的 是 除了 主 区 域 里 的 那 张 图 片 ， 其 他 所 有 的 内 容 都 有 一 个 18 像素 的 左 外 边 距 。 但 是 我 
不 会 给 主 区 域 设 置 18 像素 的 外 边 距 , 而 是 将 外 边 距 设置 给 Get Cookin’ 和 Latest Recipes 两 个 区 
域 。 


11.8.1 主 区 域 文字 


主 区 域 文字 需要 浮动 至 登录 按钮 的 左 侧 , 我 想 通 过 侧 边 栏 的 学 习 , 你 应 该 已 经 知道 怎么 样 去 
做 了 。 但 是 这 里 要 注意 中 间 区 域 的 宽 。Get Cookim’ 区 域 和 两 个 按钮 所 在 的 区 域 是 等 宽 的 ， 而 主 区 
域 的 宽度 又 是 594 (RSS. 起初 你 可 能 认为 只 要 将 594 像素 均 分 给 这 两 个 区 域 就 好 了 。 但 实际 上 这 

















O 当然 这 会 增加 你 的 工作 量 ， 所 以 你 要 在 机 智和 可 读 性 之 间 做 出 权衡 。 
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种 做 法 是 错 的 ， 因 为 你 忽略 了 18 像素 的 左 外 边 中 。 记 住 ， 外 边 中 是 要 算 在 实际 宽度 中 的 〈 至 少 
在 大 部 分 普通 浏 蜗 絮 中 是 这 样 !)。 所 以 正确 的 算法 应 该 是 : (594-18)/2=288, 
因此 ，Get Cookin’ 区 域 的 代码 是 这 样 写 的 : 


css_layout/layout.css 


#main_text{ 
Float: left; 
width: 288px; 
margin-left:18px; 


} 
11.8.2 ”注册 按钮 区 域 


注册 按钮 区 域 跟 主 区 域 非常 接近 ， 你 可 能 想 让 它们 都 共用 一 套 样 式 , 但 实际 上 你 还 是 需要 
一 些 细微 的 修改 。 首 先 ， 在 样式 页 中 ,注册 按钮 出 现在 意大利 面 图片 下 方 36 像素 的 位 置 ， 你 
需要 给 它 加 上 36 像素 的 顶部 外 边 距 。 另 外 ， 按 钮 在 这 一 栏 是 居中 显示 的 ， 因 此 你 可 以 用 
textalign:center 来 实现 这 个 效果 ,， 它 可 以 让 这 个 区 域内 的 所 有 元 素 都 居中 ,包括 段落 甚至 
是 div: 

css_layout/layout.css 


#signup_login{ 
margin-top: 36px; 
Float: left; 
width: 288px; 
text-align:center; 


按钮 也 需要 一 点 点 样式 。 在 默认 情况 下 锚 点 和 图 片 都 是 内 联 式 的 元 素 , 这 意味 着 它们 是 并 排 
显示 的 。 而 在 当前 的 例子 中 ， 我 们 希望 按钮 是 显示 在 其 他 元 素 之 上 ， 并 且 有 18 像素 的 外 边 距 将 
它们 隔 开 。 因 此 , 我 们 只 需要 将 锚 点 标签 的 display 方式 从 inline 改 为 block 就 可 以 了 , 另外， 
需要 为 它们 加 上 18 像 素 的 底部 外 边 距 : 


css_layout/layout.css 





#signup_login a{ 
width:100%; 
display:block; 
margin-bottom: 18px; 
float:left; 
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在 这 种 情况 下 ,你 肯定 希望 这 些 样式 只 局 限于 茶 个 光 围 之 内 的 。 如 琳 没 有 这 样 做 ,那么 整个 
页 面 的 链接 邦 会 受到 它 的 影 啊 ， 而 你 显然 不 布 望 发 生 这 种 事情 。 


11.8.3 ”最 新 菜 谐 


至 此 ,完成 主 区 域 中 最 后 一 块 地 方 的 格式 化 应 该 是 一 件 很 容易 的 事情 了 ,因为 你 所 需要 做 的 
只 是 重复 使 用 已 经 学 会 的 技 马 。 每 个 荣 谱 的 标题 都 会 有 18 像 素 的 缩 进 ， 然 后 每 个 菜谱 的 描述 会 在 
此 基础 上 再 缩 进 18 像 素 。 每 个 荣 谱 的 标题 都 是 用 h3 标 签 标记 的 ， 而 它们 的 描述 则 是 一 些 简 单 的 
段 洛 。 


清除 浮动 


只 要 一 个 元 素 被 设置 为 序 动 的 , 那么 它 之 后 的 所 有 元 素 都 会 环绕 它 显 示 ,， 除 非 你 让 基 一 个 元 
迷 回 到 正 第 的 文档 流 。 这 就 是 所 谓 的 清除 浮动 。 当 你 有 一 个 单 栏 布局 紧 跟 这 一 个 双 栏 布局 的 时 候 ， 
这 个 技巧 就 派 上 用 场 了 。 在 某 个 区 域 的 CSS 规则 中 用 上 clear:both， 可 以 让 这 个 区 域 回 到 普通 
的 文档 流 中 。 


用 缩小 范围 的 定义 方式 ， 只 需要 一 点 氮 代 码 就 可 以 弄 好 了 : 


css_layout/layout.css 


#latest_recipes{ 
clear:both; 
margin-left:18px; 
margin-right:18px; 
margin-top:18px; 

} 

#latest_recipes h3{ 
margin-left:18px; 

i 

#latest_recipes p{ 
margin-left:36px; 

i; 


这 些 代 码 不 但 设置 了 缩 进 ， 而 且 也 让 这 个 区 域 回 到 了 文档 流 中 。 
11.9 EEA 


虽然 现在 页 脚 里 的 东西 看 起 来 部 是正 第 的 , 但 是 为 了 以 后 的 进一步 改进 , 你 肯定 需要 为 它 加 
上 一 些 CSS 代码 。 页 脚 区 域 定 其 跟 在 回 磊 浮动 的 中 间 区 域 之 后 的 。 在 11.8 市， 你 学 会 了 如 何 清 
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PRA IACR, ERER MRR mR. FEAR BIE, BAA “apc TE” DOOR 
达到 这 个 目的 , 但 是 在 其 他 页 面 中 你 可 能 就 不 会 有 这 样 的 机 会 ， 因 此 我 总 是 会 建议 在 页 脚 做 清除 
浮动 的 工作 。 


11.10 “小 结 


本 半 的 内 容 比 较 多 。 至 此 ， 你 应 该 学 会 了 如 何 利用 CSS 实现 一 个 简单 的 双 栏 布局 效果 。 首 
页 已 经 布置 的 差不多 了 ， 现 在 是 为 它 添 加 一 些 色彩 的 时 候 了 。 


a12 
利用 覆盖 法 替换 各 区 域 中 的 标题 


12.1 什么 是 覆盖 法 


履 盖 法 并 不 是 用 图 片 检 换文 字 。 顾 名 思 义 ， 这 个 方法 会 将 一 个 新 建 的 图 层 放 在 文字 的 上 方 ， 
并 且 在 新 图 层 中 放置 一 张 图 片 。 在 讲解 CSS 的 时 候 ， 我 们 还 没有 提 到 层 的 概念 ,但 是 基本 上 CSS 
允许 你 把 元 素 放 置 在 任何 地 方 ， 前 提 是 你 要 了 解 这 种 摆 放 对 页 面 其 他 部 分 的 影响 。 

另外 ， 还 有 一 些 简单 的 替换 法 ， 像 Fahrner 图 片 蔡 换 法 (Fahrner Image Replacement) 所 采取 
的 办 法 是 将 文字 设置 为 display:none， 让 文字 不 能 显示 ， 然 后 再 把 CSS 设置 的 图 片 放 在 包含 文 
字 的 标签 里 面 。 然 而 ， 新 版 本 的 屏幕 阅读 器 开始 检查 CSS 属性 了 ， 这 将 导致 文字 被 隐藏 起 来 ， 
不 能 被 用 户 听 到 。 

履 盖 法 则 避免 了 这 个 问题 。 屏 幕 阅读 堪 不 会 载 入 图片 ， 文 字 也 可 以 被 朗读 出 来 。 另 外 ， 当 样 
式 表 被 关 掉 之 后 ， 页 面 的 显示 看 起 来 也 还 不 错 。 


12.2 ”为 覆盖 做 准备 ， 调 整 HTML 


为 了 让 窗 盖 法 正常 工作 ,在 需要 “和 窗 盖 ”的 地 方 加 上 一 对 span 标签 。 打 开 index.html XPF, 
找到 Search Recipes 这 个 标题 。 然 后 , 将 里 面 的 内 容 略 做 修改 , 在 h2 标签 闭合 前 , 加 上 一 对 span 
标签 : 

<h2 id="search_header">Search Recipes<span></span></h2> 
然后 用 CSS 在 span #2 Bay AA, FREE span 从 正常 的 文档 流 中 抽 离 出 来 ， 让 它 位 于 文字 的 
上 层 。 保 存 文件 ， 并 且 再 次 进行 验证 ， 保 证 标记 都 是 合法 的 。 


12.3 BALF 


首先 要 做 的 事情 是 将 h2 标签 变 成 一 个 有 长 度 和 宽度 的 容 右 ， 以 便 能 够 闭 下 图 片 : 
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#search_header{ 
margin:0; padding:0; 
position:relative; 
width:180px; height: 36px; 
overflow:hidden; 


} 
然后 把 内 联 元 素 span BRRR, KEMEN EI ETA So PR EIE position: 
absolute 这 个 属性 , 这 样 这 个 元 素 就 能 用 相对 于 h2 元 素 的 坐标 来 确定 位 置 了 。 我 们 刚刚 也 给 h2 
标签 加 上 了 position:relative 属性 。 


把 span 的 margin 和 padding 值 都 设 为 0， 以 防 万 一 。 最 后 把 图 片 以 背景 图 的 形式 载 和 人 到 
span 之 中 : 


#search_header span { 
display:block; 
position:absolute; left:0; top:0; z-index:1; 
width:180px; height: 36px; 
margin:0; padding:0; 
background:url("../images/search_header.gif") top left no-repeat; 


$ 
12.4 BRA Rhine 


然后 将 这 个 步骤 重复 几 次 ， 用 同样 的 方式 处 理 侧 边栏 中 的 其 他 标题 。 记 得 要 在 HTML 里 加 
上 span 标签 。 为 了 减少 样式 表 中 的 代码 量 ， 你 可 以 用 园 择 符 分 组 法 ， 将 样式 相同 的 规则 组 合 在 
一 起 : 


coverup/style.css 


#search_header, 

#browse_recipes_header, 

#popular_ingredients_header{ 
margin:0; padding:0; 
position:relative; 
width:180px; height: 36px; 
overflow:hidden; 


} 


#search_header span, 
#browse_recipes_header span, 
#popular_ingredients_header span { 
display:block; 
position:absolute; left:0; top:0; z-index:1; 
width:180px; height: 36px; 
margin:0; padding:0; 
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#search_header span{ 
background:url("../images/search_recipes.gif") top left no-repeat; 


} 


#browse_recipes_header span{ 
background:url("../images/browse_recipes.gif") top left no-repeat; 


} 


#popular_ingredients_header spant{ 
background:url("../images/popular_ingredients.gif") top left no-repeat; 


i: 
EERME RZ Jt, RSE DSA A EAE. aa e E A e 
方 是 将 高 和 宽 改 成 198 像素 和 54 RR, RINER A CZA ASE IER : 


coverup/style.css 





#get_cooking, #latest_recipes_header{ 
margin:0; padding:0; 
position:relative; 
width:198px; height:54px; 
overflow:hidden; 


J 


#get_cooking span, #latest_recipes_header span { 
display:block; 
position:absolute; left:0; top:0; z-index:1; 
width:198px; height:54px; 
margin:0; padding:0; 

} 


#get_cooking span{ 
background:url("../images/get_cookin.gif") top left no-repeat; 
f 


#latest_recipes_header span{ 
background:url("../images/latest_recipes.gif") top left no-repeat; 


} 
12.5 HAM 


你 可 以 用 相似 的 方法 处 理 超 链接 ， 但 是 应 该 用 span 将 超 链接 中 的 文字 包 帮 起 来 ， 而 不 征用 
空 的 span。 现 在 用 页 头 中 的 Foodbox 图 片 做 个 例子 ， 标 记 应 该 这 样 修改 : 

coverup/replacedheader.html 

<hl><a id="foodbox_header" href="/">Foodbox<span></a></h1> 

CSS 代码 则 跟 上 一 个 例子 差不多 ， 但 是 要 记得 display:block 属性 需要 同时 应 用 在 span 标 
仁和 a 标签 之 上 ， 这 样 才 能 创建 可 点 击 的 图 片 。 因 为 超 链接 和 span 元 素 默 认 都 征 内 联 元 素 ， 而 
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没有 办 法 给 它们 设 定 宽 和 高 。 
相应 的 样式 代码 应 该 古 这 样 鸭 : 


coverup/stylesheets/replacedheader.css 


#foodbox_header{ 
margin:0; 
padding:0; 
position:relative; 
width: 486px; 
height : 90px; 
overflow:hidden; 
display:block; 

} 


#foodbox_header span { 
position:absolute; left:0; top:0; z-index:1; 
width: 486px; 
height :90px; 
margin:0; padding:0; 
background:url("../images/banner.png") top left no-repeat; 
} 


透明 


Rene :在 我 们 的 页 面 上 做 了 以 上 的 尝试 ,就 会 发 现 履 盖 法 其 实 根本 履 盖 不 了 什么 东西 。 文 字 
过 图 片 的 透明 部 分 显现 出 来 。 为 了 修正 这 一 错误 ， namie 一 种 替换 法 : Langride 或 
RAR (LIR). 你 需要 将 span 的 高 度 设置 成 0， 再 将 它 的 顶部 padding 设置 成 跟 图 
片 一 样 的 高 度 。 因 为 一 个 盒 模型 的 高 度 是 它 自己 的 高 度 外 加 上 下 部 分 的 padding, 所 以 这 样 一 改 ， 
我 们 就 得 到 了 想 要 的 结果 ， 而 文字 则 被 隐藏 起 来 : 


coverup/stylesheets/replacedheadertransparency.css 





#foodbox_header{ 
margin:0; 
padding:0; 
position:relative; 
overflow:hidden; 
display:block; 
width: 486px; 

/* height:90px; */ 
height :0; 
padding-top: 90px; 
font-size:10px; 


© http://www.kryogenix.org/code/browser/lir/ , 
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这 段 代 码 也 减 小 了 字体 的 大 小 ， 避 免 文 字 的 上 半 部 分 超出 了 学 围 。 
12.6 ”这 种 方法 的 缺陷 


你 最 可 能 注意 到 的 缺陷 可 能 古 ， 尽 省 得 到 了 漂亮 一 些 的 字体 和 更 符合 网 格 的 对 齐 ， 但 是 在 
HTML 文档 中 添加 了 额外 的 标记 来 让 这 个 方法 生效 ， 同 时 还 引入 了 不 少 额 外 的 CSS 标签 。 至 于 
古 舍 要 在 项 目 中 用 这 种 方法 ， 还 是 取 决 于 你 的 决定 。 

另外 , 屏幕 阅读 絮 曾 经 让 其 他 的 图 片 蔡 换 方法 失效 , 所 以 你 需要 时 和 注意 这 一 点 。 换 句 话 说， 
这 个 方法 可 能 不 会 一 直 有 效 。 男 外 一 个 蔡 代 方法 是 舱 入 图 片 ， 并且 为 之 加 上 alt 属性 。 但 起 这 样 
做 就 可 能 让 搜索 引擎 忽略 你 的 标题 。 在 读 完 第 18 草 后 ， 你 可 以 了 解 到 更 多 内 容 。 





12.7 “小 结 


本 革 介 绍 的 方法 让 你 学 会 了 一 个 “搜索 3| 擎 友好 ”的 方法 来 你 留 标 题 区 的 字体 。 男 外 ,这 个 
技巧 还 能 用 在 其 他 元 素 映 上 。 


13a 
添加 样式 


你 已 经 掌握 了 如 何 用 CSS 来 确定 元 素 的 位 置 和 页 面 布局 ， 并 且 已 经 在 页 面 上 添加 了 一 些 图 
片 。 接 下 来 ， 需 要 看 看 怎么 让 页 面 变 得 更 淋 亮 一 些 。 读 完 本 草 后 ， 你 具备 的 CSS 基础 就 应 该 可 
以 让 你 独 目 完成 目 己 的 下 一 个 项 目 了 。 


另外 ， 本 昔 有 些 地 方 你 应 该 是 比较 熟悉 的 了 。 以 前 你 可 能 用 过 CSS 设置 字体 ， 或 者 用 它 做 
过 一 些 基本 的 视觉 上 的 调整 。 本 章 将 会 从 字体 和 颜色 开始 学 习 ， 同 时 还 会 结合 一 些 你 在 第 11 草 
里 学 到 的 东西 。 


13.1 设置 字体 和 颜色 


作为 程序 员 ， 对 CSS 最 恼火 的 事情 可 能 就 是 它 没有 变量 这 个 概念 ，CSS 不 会 提供 可 以 定义 
并 且 能 重复 使 用 的 变量 。 如 采 在 页 头 和 页 脚 中 都 要 用 到 16 进 制 代码 #FE500， 那 么 就 不 得 不 将 
这 个 代码 放 在 两 条 不 同 的 CSS 规则 当中 ， 或 者 息 尽 目 己 最 大 的 努力 用 远志 分 组 分 隔 符 的 方式 来 
共享 规则 。 我 觉得 一 个 比较 好 的 方法 是 把 关于 颜色 的 声明 都 放 在 样式 表 中 靠 前 的 位 置 , 这样 找 起 
来 就 不 会 很 困难 。 











V/ 小 乔 爱 问 …… 
过” 可 以 动态 地 生成 样式 表 吗 


当然 可 以 ,就 像 你 也 可 以 动态 生成 HTML 一 样 。 你 需要 做 的 是 让 你 的 网 站 后 台 对 关于 样 
式 表 的 请 求 做 出 正确 的 反应 。 这 是 一 个 很 高 级 的 方法 ， 同 时 你 还 需要 设 定 一 些 缓存 机 制 ， 避 
免 程 序 为 每 个 请 求 都 生成 一 套 样式 表 。 

这 个 想法 听 起 来 很 有 诱惑 力 ， 但 是 你 需要 考虑 CSS 不 存在 变量 这 个 特点 的 影响 有 多 大 。 
LEM EMME RRA? 重复 颜色 的 频率 呢 ? 太 多 数 情况 下 , 在 服务 器 疾 生 成 这 些 东西 的 代 
价 会 很 高 。 就 跟 其 他 类 似 问 题 一 样 ， 这 取决 于 你 的 具体 情况 。 
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13.1.1 风格 手册 的 重要 性 


很 多 公司 都 有 一 本 风格 手册 (style guide), 一 般 是 公司 里 做 品牌 定位 的 部 门 发 布 的 。 这 本 手册 
一 般 包含 的 内 容 是 关于 公司 出 版 物 中 的 颜色 和 字体 的 要 求 。 如 朱 存 在 这 样 一 本 风格 手册 , 那么 在 做 
东西 的 时 候 应 该 尽 可 能 遵守 其 中 的 规定 。Foodbox 并 没有 这 样 的 一 本 手册 ， 大 多 数 小 公司 也 没有 。 
在 本 书 中 ， 你 差不多 会 完成 所 有 的 关于 风格 手册 的 基础 工作 ， 这 将 对 你 未 来 的 项 目 十 分 有 帮助 。 


风格 手册 通 第 详细 规定 了 排版 布局 、 字 体 和 颜色 的 样式 , 同时 也 会 有 内 容 写 作风 格 的 相关 条 
鞭 。 比 如 ， 如 末 我 很 讨厌 在 网 页 中 用 到 “ 单 击 ” 这 个 总 古 让 我 如 鳗 在 哈 的 词 ， 那 么 我 会 在 风格 手 
册 里 面 加 上 一 条 类 似 的 条 球 ， 用 来 防止 任何 人 在 某 个 文 案 中 用 到 这 个 词 。 在 风格 手册 中 ,你 还 可 
以 规定 应 该 使 用 单词 “and” 而 不 是 “ 久 fe, 或 者 古 合 需要 为 链接 加 上 下 划 线 ， 等 等 。 


建立 风格 手册 的 目的 是 为 了 保持 公司 的 所 有 出 版 物 和 流通 印刷 品 在 视觉 呈现 上 保持 一 致 。 
在 本 革 中 写 的 样式 表 ， 其 实 就 是 一 种 风格 手册 的 具体 代码 实现 。 
目前 已 经 用 图 片 实现 了 不 少 字体 ， 但 是 在 CSS 中 并 没有 多 少 关 于 字体 的 声明 。 











”一些 关于 class 名 字 的 说 法 


用 具体 的 规则 作 Class 的 名 字 ,这 个 想法 听 起 来 可 能 很 诱 人 ,但 是 你 最 好 不 要 这 样 做 。 
一 直 以 来 我 见 过 很 多 这 种 HTML 代码 : 

<p class="red">An error has occurred</p> 

初 见 这 段 代码 的 时 候 , 你 可 能 觉得 它 很 漂亮 ,而 且 可 以 清楚 地 知道 设计 师 布 望 这 段 错误 
提示 是 红色 的 。 

但 是 实际 上 这 段 文字 最 终 可 能 是 绿色 的 ， 因 为 可 能 会 有 另外 一 个 人 插手 其 中 ， 觉 得 错误 
提示 不 应 该 是 红色 的 , 因为 红色 不 太 好 看 , 会 中 到 用 户 。 所 以 更 好 的 class 名 应 该 是 这 样 的 : 

<p class="critical_ warning">An error has occurred</p> 

然后 你 可 以 为 这 个 class 加 上 符合 风格 手册 的 样式 。class 名 中 应 该 包含 的 是 关于 “ 目 
的 “的 信息 。 


在 style.css 文件 中 加 入 以 下 代码 : 
css_style/stylesheets/style.css 
body{ 
font-family:Arial, Helvetica, sans-serif; 


Font-size:12px; 


} 
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另 一 方面 ， 文 字 颜 色 的 设置 可 能 需要 耗费 更 多 精力 。 我 们 不 仅 要 定义 各 个 区 域 中 的 文字 颜 
色 ， 还 要 确定 每 个 链接 的 颜色 。 


13.1.2 HŽ 


在 样式 表 中 加 入 下 面 的 代码 : 


css_style/stylesheets/style.css 


#header, #footer{background-color:#FFE500} 
#middle{background-color: #ffdd7f} 
#main{background-color:#fff8e4 } 


a{color:#4d3900; text-decoration:none;} 
a:visited{color: #806f40 ; } 
a:hover{color: #807940; text-decoration:under line; } 


上 面 关 于 颜色 的 CSS 声明 中 ,有 两 条 是 a:hover 和 a:visited。 这 种 声明 称 为 伪 类 (pseudo- 
classe)。 到 目前 为 止 , 你 所 见 到 的 样式 应 用 都 是 基于 元 素 在 文档 树 中 的 位 置 的 , 但 是 CSS 标准 也 
允许 基于 非 文档 树 信 息 的 样式 应 用 ,比如 说 基于 浏览 器 提供 的 信息 的 样式 。 浏 览 器 默认 会 把 访问 
过 的 链接 和 未 访问 过 的 链接 用 不 同 的 颜色 区 分 。 许 多 年 以 来 , 这 个 特性 已 经 变 成 了 可 用 性 的 基础 ， 
用 来 帮助 用 户 辨认 已 经 看 过 的 信息 。 本 来 , 已 访问 链接 的 颜色 是 应 该 在 每 一 页 的 body 标签 中 定 
义 的 ， 但 是 如 果 用 CSS 伪 类 来 定义 ， 只 需要 在 样式 表 中 标明 就 可 以 了 。 


:hover 伪 类 会 捕捉 鼠标 事件 ,这 是 个 十 分 强大 的 特性 。 你 可 以 用 它 来 改变 鼠标 停留 在 链接 上 
时 链接 文字 的 颜色 。 我 们 的 例子 就 是 这 样 做 的 。 同 时 ， 你 还 可 以 用 它 来 制作 下 拉 菜 单 或 者 用 它 
来 展示 页 面 的 另外 一 个 区 域 。 

Pei, Ui asth saci Lene, Æ IE6 中 ，:hover 只 对 链接 有 效 ， 而 我 们 可 以 在 其 他 浏 
览 器 中 除 链接 之 外 的 其 他 元 素 上 使 用 这 个 功能 ,从 而 创造 一 些 引 人 注目 的 效果 ， 比 如 说 图 片 翻 凑 
或 者 表单 域 突出 显示 等 。 

上 面 的 示例 还 去 掉 了 链接 的 下 划 线 ， 设 定 只 有 当 鼠 标 悬 停 在 链接 之 上 的 时 候 才 会 出 现下 划 
线 。 注 意 我 们 是 如 何 移 除 下 划 线 ， 又 是 怎样 在 伪 类 中 加 上 和 下划线 的 。 

















V/ \FE SE la] --- + 
| 为 什么 要 移 除 下 划 线 ， 这 难道 不 是 一 种 损坏 可 用 性 的 做 法 吗 


这 是 一 种 可 能 ， 用 户 会 依据 下 划 线 来 判断 文字 是 否 可 以 单 击 。 然 而 ， 时 代 在 进步 ， 用 户 
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们 的 习惯 也 与 时 俱 进 ， 他 们 开始 学 会 寻找 其 他 的 线索 ， 如 不 同 颜 色 的 文字 。 但 是 ， 去掉 下 划 
线 是 一 种 冒险 ， 如 果 标题 的 颜色 和 正文 文字 不 同 ， 这 些 单独 文学 的 闫 色 可 能 会 让 用 户 困 瓶 ， 
或 许 你 该 为 标题 考虑 一 种 差别 不 是 很 大 的 颜色 一 一 我 想 你 已 经 知道 我 在 说 什么 了 , 用 法 应 该 
取决 你 的 目标 用 户 ， 取 决 于 他 们 是 怎么 想 的 。 我 的 想法 是 现在 你 已 经 知道 具体 的 技术 ,那么 
什么 时 候 该 用 什么 东西 ， 应 该 由 你 来 决定 。 


13.2 标签 云 


以 这 个 构架 完整 的 文档 为 基础 ， 可 以 用 少量 的 代码 来 实现 标签 云 的 效果 。 在 HTML 文件 中 ， 
用 span 标签 包 庄 起 了 每 个 标签 ， 并 且 给 它们 赋 上 了 从 leve1_1 到 level_5 的 不 同 class。 越 欢 
URE, level 数 越 小 ， 反 之 亦 然 。 为 了 实现 这 个 效果 ， 需 要 为 重要 的 标签 加 上 大 而 明显 的 样 
式 ， 为 不 那么 受 欢迎 的 标签 加 上 小 而 不 太 明 显 的 样式 : 


css_style/stylesheets/style.css 


.level 1, .level 2, .level 3, .level 4, .level_5{ 

margin-bottom:18px; 

margin-left:18px; 

line-height: 36px; } 
.level_1{font-weight:bolder; font-size:20px;} 
.level_2{font-weight:bold; font-size:18px;} 
.level_3{font-size:16px; } 
.level_4{font-size:14px; } 
.level_5{font-size:12px; } 


13.3 ”搜索 表单 


页 面 上 就 剩 搜索 表单 没有 和 弄 好 了 。 跟 搜索 框 劳 边 的 那个 深 亮 图 片 按 钮 比 起 来 , 表单 显得 有 所 
怪 。 我 们 需要 给 搜索 框 设 定 高 度 、 宽 度 和 边框 ,而 且 还 需要 设 定 里 面 的 字体 。 我 们 需要 将 这 些 关 
于 高 和 宽 的 东西 定义 在 样式 表 中 ， 而 不 古 单 独 地 分 离 出 来 。style.css 里 所 有 的 东西 应 该 形成 一 个 


整体 .: 


css_style/stylesheets/style.css 











#search_form #search_keywords{ 
width:200px; 
Float: left; 
border:1px solid #000; 
height :16px; 
padding:0;} 
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要 特别 注意 这 里 的 像素 计算 。 行 高 18 像素 ， 但 是 搜 索 框 的 高 只 有 16 像素 ， 因 为 它 的 上 下 
分 别 有 1 像素 的 边框 。 


13.4 ”页 脚 


在 页 脚 中 ,文字 都 是 居中 的 , 而 且 需 要 在 样式 表 中 定义 的 36 像素 高 的 区 域内 安排 两 行文 字 。 
居中 文字 很 简单 ， 你 只 需要 在 页 脚 元 素 中 应 用 text-align:center 这 个 属性 就 好 了 。 

关于 安排 那 两 行文 字 的 方法 也 有 不 少 。 大 多 数 开 发 者 的 第 一 反应 是 在 HTML 中 把 段落 标签 p 
删除 ， 在 两 行文 字 间 用 br 换行 标签 ， 但 是 这 种 方法 让 页 面 在 语义 化 上 有 了 一 点 缺陷 。 调 整 段 落 
标签 的 样式 会 更 加 简单 一 些 。 我 们 可 以 将 页 脚 里 的 段落 margin 设 为 0， 这 样 段 落 之 间 就 没有 间 
险 了 。 而 且 ， 这 种 方法 还 为 我 们 留 出 了 很 大 的 灵活 性 。 

在 样式 表 中 加 上 : 





css_style/stylesheets/style.css 


#footer{text-align:center; } 
#footer p{margin:0;} 


13.5 ”清理 零散 的 角落 

首页 上 的 工作 基本 上 完成 了 , 但 是 还 需要 解决 一 些 没 有 对 齐 或 是 不 太 精 人 确 的 地 方 。 首 先 ， 页 
面 上 的 注册 和 登录 按钮 四 周 有 边 杠 ， 需要 去 除 这 些 边 杠 。 其 次 ,页面 上 的 黄色 没有 像 了 预想 的 那样 
随 着 屏幕 大 小 拉 伸 。 我 们 会 很 快 把 这 些 东 西 修 复 好 |! 
13.5.1 去 掉 图 片 的 边框 

带 有 链接 的 图 片 会 被 自动 加 上 一 圈 边 框 ， 用 来 提示 用 户 这 个 图 片 是 可 以 单 击 的。 在 HTML 
的 远古 上 时代， 开发 者 可 以 在 HTML 标签 中 加 入 border="0" 属 性 来 达到 这 个 目的 ， 但 是 这 种 方法 
将 设计 和 内 容 混 灯 在 一 起 了 , 我 们 可 不 希望 做 这 种 事情 。 同时 doctype 也 认为 这 种 方法 是 非法 的 。 
还 好 我 们 还 有 别 的 简单 方法 : 在 样式 表 里 关 掉 边 框 。 

在 样式 表 中 加 入 以 下 代码 ， 这 些 代码 可 以 去 掉 所 有 图 片 的 边框 : 








css_style/stylesheets/style.css 


img{border:none; } 


刷新 页 面 后 ， 绿 色 的 标签 就 会 消失 。 
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13.5.2 拉 伸 Banner 里 的 颜色 


有 很 多 技巧 可 以 达到 这 个 目的 。 比 如 可 以 将 页 头 从 名 叫 page 的 div 容 絮 中 拿 出 来 ， 将 它 放 
在 另外 一 个 div 中 ， 让 这 个 div 的 宽度 值 是 100%， 同 时 保持 页 头 的 宽度 跟 page Rir FE, (E 
人 码 如 下 : 


<body> 
<div id="header_wrap"> 
<div id="header"> 


</div> 
</div> 
<div id="page"> 


</div> 
</code> 


<p>Some CSS associated with this code would look like this:</p> 


<code 1anguage= css > 
#headerwrap{width: 100%; 
Float: left; 
height: 108px; 
background-color: #FFE500; 
} 


#header, #page{ 
margin:0 auto; 
width: 900px; 








$ 
IAS EAR TL, FR EOS A AR ACA Tel LA — BER. FEE MARA IRS SUE, it 
不 愿意 去 调整 每 个 页 面 ， 又 该 怎么 办 呢 ? KE RA He ETI — FA ae SS LE a HH, 这 


时 要 怎么 做 呢 ? 可 以 用 重复 育 景 图 片 的 技巧 来 达到 相同 的 目的 。 

在 Photoshop 中 打开 样式 文档 ， 选 中 切片 工具 。 

第 一 步 要 做 的 是 从 页 面 中 切 下 一 小 片 图 片 ， 包 括 了 整个 黄色 Banner 的 高 度 以 及 一 点 点 的 日 
E. 在 页 面 的 左上 角 创 建 一 个 宽 1 像素 、 高 128 像素 的 切片 。 你 既 可 以 手工 将 切片 缩小 到 这 么 小 ， 
也 可 以 在 设置 切片 名 字 的 时 候 调 整 它 的 宽度 ， 并且 将 它 命名 为 background, 设置 好 之 后 ,将 这 个 
切片 以 GIF 格式 导出 到 images 文件 来。 

然后 在 样式 表 中 为 body 标签 加 入 如 下 代码 ， 让 这 个 小 切片 水 平 重复 排列 : 


css_style/stylesheets/style.css 


body{ 
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background: #fff url(C'../images/background.gif') repeat-x; 
} 


当 你 在 Firefox 中 预览 页 面 时 ， 它 看 起 来 应 该 和 图 13-1 一 样 。 





Get Cookin’ 
Foodbox is the best way to collect and share recipes 


with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
























renowned chefs or users just like you. You can also 


share your own secret recipes with a few of your j 2 
friends or make them available to the rest of the 
world! 


Create an account today and get cookin! 











Latest Recipes 
Stuffed Chicken Breast 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make even 
for beginners. 


Chocolate Pancakes 


This complete-from-scratch classic pancakes recipe is sure to please even the pickiest eater, 
especially chocolate lovers. 


13-1 Æ Firefox 中 的 Foodbox 首页 


13.6 “小结 


经 过 很 长 时 间 的 锻炼 之 后 , 你 终于 做 到 了 这 一 步 , 杀手 写 出 符合 规则 的 代码 , 适用 于 Firefox 
浏览 器 (还 有 Safari, 去 看 看 吧 )。 但 是 , 作品 还 没有 完工 , 除非 你 把 它 放 在 其 他 环境 中 测试 一 下 ， 
和 村 别 是 那个 用 户 其 广 的 由 微软 生产 的 训 览 愉 。 


第 148 
制作 打印 机 友好 的 页 面 


Foodbox 是 一 个 关于 全 谱 的 网 站 ， 我 们 期 竺 用户 会 打印 出 他 们 在 网 站 上 找到 的 菜谱 。 这 本 可 
以 用 后 台 程 序 实 现 文 持 打印 机 的 功能 ， 但 是 在 本 章 中 ， 我 将 同 你 展示 如 何 只 用 CSS 来 改变 页 面 
的 外 观 ， 让 它 满足 用 户 的 打印 需求 。 


14.1 准备 工作 


当 用 户 打 印 一 个 网 页 的 时 候 ， 他 通常 只 关心 页 面 上 的 有 效 信 息 。 在 打印 页 面 的 时 候 ， 像 侧 
边栏 、 导 航 栏 、 一 些 图 片 、 背 景 颜色 甚至 花哨 的 标题 等 元 素 都 没什么 用 ， 将 它们 打印 出 来 反倒 走 
浪费 和 盐水 和 纸张 。 所 以 ， 当 你 需要 做 一 个 打印 友好 版 本 的 页 面 时 ， 站 先 要 旁 卡 的 是 如 何 去 挥 这 些 
元 素 。 

当 在 页 面 上 链接 layout.css 和 style.css 文件 的 时 候 ， 为 它们 指定 的 征 只 在 屏 攻 显示 的 情况 下 
调用 。 这 就 车 味 着 在 打印 的 时 候 ， 页 面 是 没有 样式 的 ， 也 就 是 说 可 以 从 头 开 始 专 门 为 打印 功能 设 
计 一 套 样 式 表 。, 这 样 也 就 不 用 担心 因为 出 现 样式 冲突 或 者 覆盖 而 让 用 户 剖 览 右 的 默认 样式 趁 虚 而 
入 的 回 题 了 。 


14.2 ”链接 打印 用 样式 表 


新 建 一 个 print.css 文件 ， 将 它 保存 在 stylesheets 文件 夹 中 。 打 开 index.html 文件 ， 在 style 
标签 之 后 加 入 以 下 代码 以 链接 这 个 文件 : 


css_print/index.html 























<link rel="stylesheet" href="stylesheets/print.css” 
type="text/css" media="print" charset="utf-8"> 


这 次 将 media 类 型 设置 成 print 而 不 是 screen。 在 用 户 进行 打印 预览 操作 或 者 将 页 面 发 送 








D 另 一 方面 , 客户 可 能 需要 打印 出 整个 页 面 。 这 样 他 们 才 可 以 在 页 面 上 写 写 画 画 ， 然 后 给 你 提 意 见 。 但 是 客户 并 不 


另 
是 网 站 的 主要 用 户 。 
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到 打印 机 的 时 候 ， 现 代 训 览 右 会 局 用 这 个 样式 表 。 在 制作 的 工程 中 ,你 可 以 利用 阐 砚 兰 的 打印 预 
贤 功 能 来 测试 样式 的 好 坏 ， 同 时 你 应 该 尽 可 能 在 真实 的 打印 机 上 做 一 些 测 试 。 


14.3 去掉 不 需要 的 元 素 


下 面 研 究 一 下 主页 ， 看 看 哪些 东西 古 不 需要 打印 出 来 的 。 首 先 , 侧 边 栏 和 标签 云 古 不 需要 打 
印 出 来 的 ,所 以 可 以 很 放心 地 将 它 去 挤 。 那 张 意大利 面 的 图 片 也 是 可 有 可 无 的 ， 另 外 还 有 登录 和 
注册 按钮 。 

不 用 担心 那些 主页 上 的 颜色 ， 因 为 在 打印 的 时 候 不 会 调用 相应 的 样式 表 。 

那些 服务 条 款 和 隐私 政策 的 链接 也 十 无 用 的 ， 一 并 去 挥 。 


在 写 HTML 文档 的 时 候 ， 可 以 给 上 述 的 区 域 都 加 上 了 唯一 id 以 便 引 用 。 现 在 ， 需 要 做 的 只 
是 将 这 些 区 域 的 display 属性 设置 成 none 就 好 了 ， 在 stylesheets/print.css 中 加 入 如 下 代码 : 











css_print/stylesheets/print.css 


#sidebar, #main_image, #signup_login, 
#privacy_and_terms, .noprint{ 
display:none; 


} 
Noprint class 

在 上 面 的 选择 符 中 , 我 加 入 了 一 个 叫做 noprint 的 class, 你 可 以 把 这 个 class 用 在 页 面 上 
所 有 打印 时 需要 隐藏 的 元 素 届 上 。 例 如 ,你 可 以 在 Logo 元 素 的 HTML 代码 中 加 入 class="noprint" 
来 隐藏 这 个 元 素 。 这 种 做 法 在 完美 主义 者 眼中 可 能 是 模糊 内 容 和 显示 这 两 者 界限 的 举动 , 但 是 在 
使 用 后 台 脚 本 生成 动态 元 素 的 时 候 ， 这 是 一 种 高 效率 的 做 法 。 


将 一 个 元 素 设 置 成 display:none 后 ， 它 不 仅仅 是 “不 可 见 ” 的 状态 ， 这 个 元 素 同 时 还 被 移 
出 整个 文档 。 
14.4 ”设置 外 边 距 、 宽 度 和 字体 


在 为 屏 和 项 显示 设计 布局 的 时 候 ， 曾经 关 挥 了 所 有 议 蜗 如 默认 的 样式 , 然后 定义 了 目 己 的 外 边 
距 、 行 高 和 字体 大 小 。 在 这 里 我 们 会 使 用 一 套 同样 的 程序 ， 只 是 会 用 点 (point) 来 代替 像素 ， 
为 打印 机 使 用 的 单位 定点。 


在 样式 表 中 加 入 以 下 内 容 : 
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css_print/stylesheets/print.css 


body, p, h1,h2,h3,h4,h5{margin:0; padding:0;} 
p, h1,h2,h3,h4{line-height:18pt; } 
p{font-size:12pt; margin-bottom:18pt; } 
hi{font-size:18pt; } 

h2{font-size:16pt; } 

h3{font-size:14pt; } 


14.4.1 页 面 外 边 距 


你 可 能 会 注意 到 ， 我 们 已 经 将 页 面 的 margin 设置 为 0， 因为 在 打印 的 时 候 出 现 的 外 边 距 大 
多 依赖 于 操作 系统 的 打印 机 驱动 程序 ， 而 在 CSS 中 增加 更 多 外 边 距 所 导致 的 结 末 ， 是 文档 内 容 
距离 页 边 的 外 边 距 空间 比 你 想象 中 的 要 大 得 多 。 


14.4.2 ”选择 一 个 字体 


很 多 放 蜗 融 都 会 默认 使 用 守 线 字体 ， 这 种 字体 在 打印 文档 中 更 容易 阅读 。 关 于 这 个 字体 ,我 
在 4.2 攻 中 已 经 讨论 过 了 。 


在 打印 用 样式 表 中 加 入 如 下 代码 : 


css_print/stylesheets/print.css 


body{ 
font-family: Baskerville, Times New Roman, Times, serif 


i 
上 面 那 段 代码 确定 了 在 body 中 使 用 Baskerville 字体 ， 男 外 还 设置 了 两 个 备 选 方案 。 这 条 规 
则 将 被 应 用 在 body 中 的 每 一 个 元 素 上 ， 除 非 它 们 有 其 他 的 目 定义 字体 。 





在 打印 的 时 候 处 理 图 片 

到 目前 为 止 ， 图 片 一 直 都 是 用 像素 来 做 单位 的 ， 在 打印 的 时 候 ， 如 果 图 片 不 能 被 隐藏 ， 
那么 有 两 种 方法 可 以 解决 这 个 问题 。 第 一 种 方式 是 用 CSS 将 图 片 的 高 和 完 改 成 合适 的 比例 ， 
第 二 种 方法 是 改变 图 片 周 围 的 文字 位 置 ， 不 让 那些 文字 环绕 图 片 显 示 。 

在 打印 用 的 样式 表 中 改变 图 片 大 小 可 能 会 有 些 风险 , 如果 增 大 图 片 则 让 打印 结果 中 图 片 
的 像素 颗粒 更 明显 。 但 是 如 果 图 片 具有 可 以 用 来 引用 的 IJD， 那 这 个 方法 还 是 可 行 的 。 

第 二 个 选择 则 要 好 一 些 ， 用 CSS 来 重新 组 织 页 面 ， 让 图 片 不 再 浮动 。 

记 住 ， 页 面 上 的 图 片 可 能 根本 就 不 适合 打印 ， 因 为 它们 只 有 72dpi。 如 果 布 望 在 网 站 内 
容 中 加 上 高 分 辩 举 的 图 片 ， 你 可 能 需要 在 服务 器 茹 做 一 个 PDF 生成 的 功能 ， 并 且 使 用 高 质 
量 的 可 以 被 打印 的 图 片 。 
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14.4.3 ”加 上 一 个 分 隔 符 


现在 没有 了 让 我 们 分 辨 不 同 区 域 的 颜色 , 所 以 只 能 用 一 条 细 的 黑色 线段 为 页 涉 加 上 一 个 下 边 
框 ， 区 分 开 页 头 和 内 容 。 
css_print/stylesheets/print.css 


#header{border-bottom:1px solid #000; } 
你 可 以 用 类 似 的 规则 来 制作 水 平分 隔 线 , 用 来 分 开 每 个 区 域 , 而 设 有 必要 将 这 些 分 割 线 当 成 
页 面 内 容 放 进 文档 。 


14.5 ”搞定 链接 


人 们 读 打印 版 页 面 的 时 候 没 有 办 法 知道 那些 链接 将 会 链 到 何方 ,这 里 将 利用 一 段 比 较 “先进 ” 
的 CSS 代码 让 上 述 情况 得 到 改进 。 


在 样式 表 中 加 入 如 下 代码 : 


css_print/stylesheets/print.css 


#main a:link:after, #main a:visited:after { 
content: " (" attr(Chref) ") "; 
font-size: 90%; 

$ 


在 此 ， 使 用 了 CSS 抓 取 href 属性 ， 并 把 它 放 在 了 内 容 当 中 。 这 个 小 技 马 在 任何 地 方 都 是 可 
行 的 ， 除 了 TES LARITAY IE bias, ZED ar S A PRIM 


这 样 ， 样 式 表 就 完成 了 ， 在 打印 页 面 的 时 候 ， 这 个 页 面 看 起 来 会 跟 图 14-1 一 样 。 
中国 
foodbox 


Get Cookin... 


Foodbox is the best way to collect and share recipes with the rest of the world. You can build your own 





recipe book from thousands of great recipes from renowned chefs or users just like you. You can also 


share your own secret recipes with a few of your friends or make them available to the rest of the world! 
Create an account today and get cookin! 
Latest Recipes 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make even for 


beginners. 


Chocolate Pancakes (#) 
This complete-from-scratch classic pancakes recipe is sure to please even the pickiest eater, especially 


chocolate lovers. 


Copyright © 2008 Foodbox, LLC, all rights reserved. 


14-1 在 打印 样式 表 下 呈现 出 来 的 首页 
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强制 分 页 


用 样式 表 你 可 以 在 打印 的 时 候 强 制 分 页 。 假设 要 打印 出 一 个 带 标记 的 菜 增 文档 ,如 下 所 


<div class= recipe > 

<h2>Bacon Explosion</h2> 

<ul> 
<li>2 pounds thick cut bacon</1i> 
<li>2 pounds Italian sausage</l1i> 
<li>1 jar of your favorite barbeque sauce</1i> 
<li>1l jar of your favorite barbeque rub</1i> 
</ul> 


<div class="recipe'> 
<h2>Amazin' Bacon Burger</h2> 
</div> 
如 果 想 要 每 个 菜谱 在 打印 的 时 候 都 单独 占 一 页 ， 那 么 可 以 加 入 如 下 代码 : 
.recipe {page-break-after: always;} 


然后 ， 如 果 对 这 个 Bacon Explosion 的 菜谱 感觉 不 错 ， 你 可 以 去 亲自 试 试 看 ! ” 


146 ”还 要 应 付 不 习惯 专 有 打印 样式 的 用 户 


有 些 用 户 可 能 希望 打印 版 的 页 面 就 是 原 有 的 网 页 。 实 际 上 我 遇 到 过 这 种 客户 ， 他 们 看 到 打印 
版 页 面 跟 原 来 的 页 面 不 一 储 就 会 很 诅 忧 。 


为 了 稍微 安抚 一 下 这 种 情绪 ， 你 可 以 在 页 面 上 的 某 个 位 置 加 上 一 个 Print Contents Only (只 
打印 内 容 ) 链接 。 这 个 链接 看 起 来 可 能 古 这 样 的 : 

<a href="#" onclick=" window.print(); return false">Print Contents Only</a> 

这 个 链接 用 到 了 JavaScript， 把 动作 和 内 容 混 杂 在 了 一 起 ， 你 或 许 也 应 该 考虑 用 一 段 不 起 眼 
的 代码 来 添加 这 上 段 和 链接 。 

你 也 可 以 将 layout.css 和 style.css 用 作 打 印 样 式 ， 在 打印 时 加 载 它 们 。 但 古 有 的 六 览 如 在 对 
付 长 而 浮动 的 元 素 时 会 有 辣 题 ,所 以 可 能 需要 用 打印 样式 来 害 盖 一 些 样式 规则 。 但 古 我 并 不 推荐 
这 样 做 ， 因 为 我 个 人 认为 ， 比 起 卷 和 人 丑陋 的 “覆盖 样式 ”中 ， 教 会 客户 和 用 户 接受 这 种 新 的 打印 





© http://www.bbqaddicts.com/bacon-explosion.html, 
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形式 要 简单 得 多 。 一 旦 你 的 用 户 知道 了 必须 用 一 套 新 的 打印 用 页 面 布局 的 原因 , 像 节 省 墨水 和 纸 
张 、 让 注意 力 集中 在 内 容 上 等 ， 他 们 甚至 可 能 会 欣 贰 这 个 主意 。 


14.7 小结 


打印 用 样式 表 的 实现 过 程 是 很 容易 的 , 并 且 这 个 做 法 能 极 大 地 增加 用 户 体 验 , 只 要 保证 过 程 
和 结 末 都 是 简洁 的 。 你 能 用 这 些 样式 把 页 面 内 容 变 得 整齐 、 易 读 。 你 可 以 用 相同 的 技巧 来 让 页 面 
EMEP R (RARA), ， 甚 至 是 屏幕 阅读 规 一 类 的 辅助 性 软件 。 当 然 ， 这 一 切 都 
征 建 立 在 对 页 面 内 容 正 确 标 记 的 基础 上 的 ， 并 且 还 要 注意 内 容 和 显示 的 分 离 。 
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第 7 了 .9 章 


LER iS fy TE 和 其 他 浏览 器 


搞定 训 蜗 侣 兼容 性 能 占 到 网 页 开发 工作 量 的 一 大 部 分 ， 特 别 是 当 你 面 对 大 量 受 众 的 时 候 。 你 
无 法 为 他 们 指定 一 蒜 麟 览 絮 来 看 你 的 网 页 ， 所 以 你 不 得 不 让 你 的 网 站 能 够 在 尽 可 能 多 的 用 户 面 前 
正 第 显示 。 你 已 经 可 以 i 上 Firefox 议 蜗 如 正常 显示 网 站 了 , 现在 需要 学 习 如 何 让 它 在 其 他 便 览 如 中 
看 起 来 没有 问题 ， 这 里 说 的 其 他 训 览 袁 包 括 了 了 正 。 现 在 你 会 意识 到 ， 那 些 为 了 让 代码 符合 网 页 标 
准 而 做 出 的 努力 是 值得 的 ， 因 为 到 目前 位 置 ， 大 部 分 族 览 如 都 应 该 可 以 正确 显示 你 的 网 站 了 。 


15.1 AGE MS ae 


在 曾经 长 达 6 EAI IA, PA A in Ree IE6 ATLA. LAA A AH 
呈现 引擎 ， 但 是 6 年 时 间 在 IT ARE SF, CUBLEK SR ARE EMR, FFA SPA 
相应 的 解决 方法 。 随 着 IE7 的 发 布 , 一 些 新 的 呈现 显示 问题 叉 浮 出 水 面 ， 因 为 微软 对 之 前 的 一 些 
问题 做 了 修正 ， 同 时 还 改动 了 其 他 地 方 。 在 我 所 写本 书 的 时 候 ， 正 8 也 将 完工 ， 看 上 去 它 也 会 带 
来 同样 的 问题 。 

与 此 同时 ，Firefox 和 Safari 经 历 了 各 目的 三 个 版 本 。 训 跪 左 跟 其 他 软件 一 样 ， 都 在 进步 ， 你 
无 法 做 到 让 你 的 网 站 在 每 种 训 览 如 的 每 一 个 版 本 中 都 能 完美 显示 且 功 能 完好 , 无 论 是 时 间 还 是 精 
力 都 不 允许 你 这 样 做 。 最 终 ， 你 不 得 不 决定 哪些 浏 览 絮 是 你 要 支持 的 。 

15.1.1 支持 浏览 呈 

如 末 你 够 胆 大 ， 可 以 只 支持 一 黎 训 览 右 ， 前 提 是 你 的 生意 允许 你 这 样 做 。 比 如 说 在 为 公司 设 
计 内 网 系统 , 如 果 你 可 以 指定 所 有 人 都 使 用 Firefox, MARZ AA HET A], CHAMP Software 
是 一 家 在 明尼苏达 州 曼 卡 托 市 的 公司 , 为 健康 护理 产业 开发 网 络 应 用 ,他 们 设计 的 产品 就 只 支持 
Firefox 浏览 器 。 

你 还 可 以 仿照 雅虎 , 为 你 的 用 户 推荐 一 款 浏览 器 , 但 是 这 个 方法 可 能 会 被 专业 开发 人 员 取 笑 。 
在 上 世纪 90 FR, 无 数 的 业余 网 页 上 都 有 “用 正 获 得 最 佳 浏 览 效 有 末 ” 的 字样 。 在 图 15-1 中 ， 你 
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可 以 看 到 雅虎 也 采取 了 相同 的 手段 。 








File Edit view Favorites Tools Help 





Back ~ O ~ (x) (2) A| A Search e Favorites ef) Media | (07 a B 
Address 2) http://www. yahoo.com! 











& Yahoo! recommends upgrading to the NEW, safer, faster Firefox 3 - FREE 


YAHOO! 


Web Images Video Local Shopping mor 





Search: || 


My Yahoo! 
15-1 雅虎 推荐 使 用 Firefox 3 


不 要 质 得 这 是 一 种 偷懒 的 方法 。 虽然 让 网 站 适合 全 平台 并 不 是 一 个 多 么 困难 的 挑战 , 但 是 这 
个 做 法 不 能 最 有 效 地 利用 时 间 、 精 力 和 金钱 。 至少 要 估计 你 做 出 的 决定 会 导致 多 少 社 在 用 户 的 流 
R, 并 且 将 这 个 流失 作为 一 个 浪 虑 的 因素 。 相 对 于 商业 网 站 ,企业 内 部 应 用 通 第 可 以 在 很 大 程度 
上 如 开 这 个 过 程 。 


15.1.2 只 支持 东 些 特性 


你 可 以 决定 网 站 的 菜 些 功 能 在 茶 些 广 览 带 中 无 法 使 用 。 做 软 就 提供 了 两 个 版 本 的 网 页 版 
Outlook， 一 个 是 只 支持 TE 的 完 束 版 ， 另 外 一 个 则 是 在 其 他 任何 地 方 都 能 使 用 的 轻 量 级 版 本 。 和 宛 
整 版 本 有 树 形 末 单 来 控制 收 件 箱 ， 外 加 一 些 只 支持 TE 的 特有 功能 。 轻 量 级 版 本 缺少 很 多 高 级 功 
能 ， 但 古人 们 还 是 可 以 通过 它 来 研 看 E-mail 的 。 


最 终 目 标 是 让 页 面 的 功能 可 以 满足 所 有 人 的 基本 需求 。 
15.2 ”关于 浏览 器 的 一 些 数 据 


通过 一 些 关 于 神 贤 融 的 数据 ， 可 以 找到 用 户 们 都 在 用 什么 样 的 浏 贤 严 。Hitslink.com 维护 着 
一 份 关 于 浏览 器 市 场 占有 率 的 报告 ， 这 份 报告 提供 了 一 个 不 错 的 “市 场 快照 ”。 同 时 ， 
W3Counter.com 和 StarOwl 也 会 提供 比较 准确 的 数据 。 在 做 出 关于 浏览 器 种 类 的 相关 决定 时 , 参 
演 多 个 来 源 的 数据 是 很 有 帮助 的 , 特别 是 当 你 在 局 动 一 个 新 网 站 的 时 候 。 鸡 外 ， 网 站 上 线 一 段 时 
间 之 后 ， 你 应 该 有 一 份 目 己 的 日 志 ， 用 来 帮助 你 日 后 做 出 判断 。 








®© http://marketshare.hitslink.com/report.aspx?qprid=0 , 
© http:/www.w3counter.com/globalstats.php , 


© http://www.statowl.com/web_browser_market_share.php, 
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在 我 撰写 本 书 的 时 候 ， 多 数 报告 显示 Firefox 占有 了 17% 一 26% 的 市 场 份额 ， 而 大 部 分 用 户 
DEEEH 正 7, 它 占 到 了 市 场 份额 的 42%。 出 人 意料 的 是 , 有 15% 一 27% 的 用 户 仍然 在 使 用 IE6。 
我 们 不 得 不 让 自己 的 网 站 支持 IE6， 因 为 放弃 20% 的 潜在 用 户 显 然 是 不 明知 的 。 

你 的 客户 和 客户 的 客户 多 数 都 是 用 TE 的 ， 这 个 猜测 一 般 不 会 有 错 。 你 开发 的 网 站 一 定 要 保 
证 功能 正 第 , 并 且 它 的 外 观 在 面 对 各 种 广 览 副 的 时 候 能 保持 一 致 并 且 美 观 。 只 有 这 样 才 算 古 完 
地 完成 了 工作 。 


15.3 Internet Explore: 你 无 法 逃避 的 恶魔 


我 认为 没有 哪个 坚持 网 页 标准 的 网 络 开 发 者 会 喜欢 跟 IE 打交道 。 在 本 书 的 讲解 中 ， 我 已 经 
提 到 了 许多 我 们 需要 面 对 的 日 常 问题 ， 其 中 包括 元 素 和 模式 呈现 的 区 别 。IE 的 很 多 方式 都 是 错 
的 ， 但 是 由 于 它 突 出 的 受 欢 迎 程度 ， 你 无 法 忽视 它 ， 而 且 你 的 顾客 也 不 会 去 理会 你 的 个 人 喜好 。 

每 一 个 预 装 微软 的 Windows 操作 系统 的 电脑 都 会 随机 装 有 IE。 虽 然 用 户 们 其 实 可 以 随意 选 
择 一 个 其 他 的 训 览 绒 ， 但 是 一 般 用 户 安 装 Firefox, Safari, Opera 或 者 是 Google Chrome 的 几率 还 
是 很 小 。 我 会 把 我 能 接触 到 的 地 方 全 安装 上 Firefox， 我 的 家 人 和 朋友 也 会 用 Firefox， 因 为 看 中 
了 它 的 安全 性 。 但 是 这 不 能 代表 大 众 的 情况 ， 因 为 我 是 一 个 技术 人 员 , 我 的 大 部 分 朋友 和 家 人 也 
是 。 作 为 开发 者 ， 我 们 必须 持 有 一 个 概念 ， 就 是 大 众 用 户 不 会 跟 我 们 用 一 样 的 工具 。 











当心 你 的 数据 来 源 


W3Schools 上 有 一 个 总 是 被 引用 的 浏览 器 统计 数据 网 页 "， 页 面 上 列 出 了 各 个 浏览 器 的 详细 
市 场 份额 。 如 果 你 去 查看 那个 页 面 ， 会 发 现 FireFox 的 市 场 占有 率 跟 IE6 和 IE7 加 起 来 的 占有 率 
差不多 。 但 是 ， 你 要 记 住 这 个 页 面 的 主要 用 户 是 技术 人 员 ， 页 面 上 有 如 下 的 免责 声明 : 

“W3School 是 一 个 为 那些 对 网 页 技术 感 兴趣 的 人 建立 的 网 站 。 这 些 用 户 会 比 普通 用 户 更 
喜欢 用 非 主流 的 浏览 器 。 一 般 的 用 户 还 是 会 倾向 于 使 用 E, AA’ =e Windows 自 带 的 浏览 
器 ， 这 让 普通 用 户 不 需要 去 找 其 他 的 浏览 器 使 用 。 

Firefox 是 一 个 很 好 的 浏览 器 ， 它 的 市 场 占 有 座 的 快速 增长 得 瘟 于 它 的 用 户 和 和 它 的 投资 
人 。 但 是 当 你 在 收集 浏览 器 相关 的 统计 数据 时 ,特别 是 这 些 数据 是 用 来 支撑 你 的 决策 的 时 候 ， 
注意 检查 信息 来 源 的 可 信 度 。 


— EM 
微软 TE A bias Ae E ae CER, RPP LE Re eit Tt. EKE, 


®© http://www.w3schools.com/browsers/browsers_stats.asp, 
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WE JA EERE EHEC TARA es, 它 关 注 更 多 的 是 如 何 让 它 目 己 的 产品 在 上 面 正 稼 和 运 
ÍT, 1#.NET Framework 组 件 、ActiveX 控件 、Outlook 网 页 版 和 ShairPoint 等 。IE 不 过 是 微软 网 络 
相关 产品 的 配送 品 而 已 。 

这 些 产 品 为 微软 带 来 了 巨大 的 利润 , 所 以 它 必 须要 在 一 定时 间 内 支持 这 些 产品 。 所 以 微软 不 
能 去 修复 那些 我 们 都 知道 并 且 讨 厌 的 问题 ， 因 为 这 会 寻 致 它 目 己 的 应 用 崩溃 。 


W 小 乔 爱问 
忆 ”什么 时 候 可 以 终止 对 一 种 浏览 器 的 支持 


这 就 需要 你 、 你 的 客户 和 公司 ， 以 现 有 用 户 和 潜在 用 户 的 分 析 数 据 为 基础 来 做 出 类 似 的 决 


定 。 看 看 我 们 在 15.2 节 中 提 到 的 那些 浏览 器 的 统计 数据 ,截至 我 写 这 本 书 的 时 候 , 下 的 活跃 用 
户 仍然 比 Firefox 要 多 。 如 果 你 只 布 望 网 站 面 对 Firefox 的 用 户 ， 那 么 这 个 数据 对 你 来 说 关系 并 


不 大 。 但 是 如 果 你 的 目标 用 户 是 每 一 个 人 ， 那 么 你 要 注意 别 把 大 部 分 潜在 用 户 拒 之 门 外 。 
我 在 决定 支持 哪 种 浏览 器 时 一 直 壹 守 这 条 准则 : 支持 市 场 份 额 最 大 的 两 个 版 本 的 浏览 
器 ， 同 时 保证 网 站 在 其 他 浏览 器 中 可 用 且 可 读 。 不 要 求 在 所 有 浏览 中 看 到 的 网 页 完全 相同 ， 
但 至 少 用 户 可 以 正常 使 用 网 站 。 
其 实 ， 关 于 浏览 器 和 功能 的 选择 性 支持 , 会 极 大 地 影响 客户 的 收益 ,以 及 客户 付 给 你 的 
JRD, 





15.4 |EY7 

IE7 似乎 还 蛮 喜 欢 我 们 的 网 页 的 。 在 E7 里面， 内 容 居 中 、PNG 的 透明 都 没有 问题 ， 所 有 的 
东西 也 都 在 它们 应 该 在 的 地 方 。 究 其 原因 ,是 因为 我 们 保证 了 代码 是 完全 符合 标准 的 ， 于 是 避免 
了 将 正 带 入 它 自 己 的 诡异 呈现 模式 。 











决定 呈现 模式 
有 些 时 候 你 无 法 得 知 你 所 处 的 呈现 模式 是 什么 ,但 是 用 JavaScript 可 以 帮 你 了 解 这 个 信 
息 。 在 页 面 的 头 部 加 入 以 下 程序 片段 ， 看 看 页 面 是 否 是 在 标准 模式 下 呈现 的 : 


<script type="text/javascript" charset="utf-8"> 


if (document.compatMode == 'CSS1Compat'){ 
alertC"Standards mode"); 

telse{ 
alertC"Quirks mode"); 


</script> 
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IE 的 诡异 模式 

在 11.5 市 中 探讨 盒 模 型 的 时 候 ， 提 到 过 正 的 “诡异 模式 ”。 然 而 ， 为 了 让 正 能 进入 标准 模 

(XML prolog) 放置 在 文档 的 顶端 。 这 种 预 置 


却 ， 仅 设置 一 个 正确 的 doctype Ei HAH 
会 用 


已 
已 


15.4.1 


15.4.2 ”XML 序言 
一 些 网 页 编辑 器 (或 者 模板 ) 会 把 XML FF 
的 序言 会 让 IE6 用 诡异 模式 进行 星 现 。 如 果 你 在 文档 中 看 到 了 下 面 一 行 代码 ， 你 应 该 将 它 移 除 : 


<?xml version="1.0" encoding="1s0-8859-1"?> 
15.4.3 ”在 doctype 上 方 的 注释 
开发 者 喜欢 用 注释 来 铝 其 他 人 解释 页 面 的 功用 , 或 者 是 用 注释 标明 一 些 稍 后 其 他 人 可 月 
到 的 信息 。 然 而 ， 如 末 你 将 注释 放置 在 了 doctype 声明 之 上 ，IE6 和 1IE7 都 会 进入 诡异 模式 。 
所 以 , HT MWE” E, 千 万 不 要 在 doctype 之 前 放置 任何 内 容 , 这 样 它 才 会 以 标准 模式 呈现 。 
用 IE6 打开 Foodbox 网 站 ， 你 就 会 发 现 Banner 中 的 图 片 不 透明 了 ， 双 栏 布 局 也 被 破坏 了 ， 总 之 
的 ， 但 IE6 还 是 处 理 不 了 一 些 东 西 。 如 图 15-2 所 示 。 


一 一 


15.5 IE6 
很 糟糕 。 即 便 我 们 保证 它 是 以 标准 模式 运行 





15-2 IE6 对 页 面 有 很 大 的 意见 
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网 页 测试 
在 现 如 今 的 网 页 开发 过 程 中 , 跨 浏 览 器 测试 是 非常 重要 的 ,由 此 产生 了 很 多 种 测试 方法 。 
以 下 是 我 用 过 的 一 些 方 法 。 
口 crossbrowsertesting.com 网 站 提供 了 不 同 平 台中 为 不 同 浏览 器 设置 的 镜像 ， 其 中 平台 
包括 了 Linux、Mac OS 和 一 些 不 同 版 本 的 Windows, 
O 微软 提供 了 专 为 开发 者 准备 的 虚拟 机 ， 虚 拟 机 中 可 以 有 不 同 的 操作 系统 和 浏览 器 。 
不 过 那些 镜像 很 快 就 会 过 期 ， 你 可 能 需要 不 时 地 更 新 镜像 。 
口 IETester 可 以 让 你 同时 运行 数 个 不 同 版 本 的 下。 这 个 软件 只 有 Windows 版 本 。 
现在 ,， 跨 平台 跨 浏 览 器 的 页 面 测 试 变 得 非常 容易 ， 然 而 如 果 你 追求 最 简单 的 方式 , 我 向 
你 推荐 Mac 平 台 。 在 我 的 Macbook Pro 上 可 以 用 Safari 和 Firefox 来 开发 ， 然 后 还 能 很 方便 
地 用 本 地 虚拟 机 来 运行 Windows 和 Linux 测试 页 面 。 


15.5.1 修复 不 正常 的 地 方 


有 很 多 CSS hack 和 资源 能 让 你 的 网 页 在 IE6 中 正 第 显示 ， 但 是 用 hack 来 解决 问题 是 一 种 不 
太 好 的 开发 方法 ， 因 为 hack 总 会 被 修正 的 。 你 需要 的 是 一 种 更 好 的 方法 来 定位 用 户 的 浏览 各 ， 
还 好 微软 为 我 们 提供 了 一 个 几 近 完美 的 解决 方案 : 条 件 式 注释 。 

你 可 以 用 条 件 式 注释 来 针对 所 有 的 卫 ， 也 能 制定 茶 种 特殊 厂 本 的 了 下。 这 些 注 释 只 会 被 下 辨 
认 ， 其 他 的 阅览 右 会 把 它们 当 作 一 般 的 HTML 注释 视而不见 。 





working_with_ie/index.html 


<!--[if IE 6]> 
<link rel="stylesheet" href="stylesheets/ie6.css" 
type="text/css" media="screen"> 
<![endif]--> 


<!--[if IE 6]> 


<style> 


#header img{behavior: url (Cstylesheets/iepngfix.htc) } 
</style> 
<![endif]--> 


®© http://crossbrowsertesting.com/, 

®© http://www.microsoft.com/downloads/details.aspx? FamilyId=2 1EABB90-958F-4B64-B5F1-73D0A413C8EF\&dis- 
playlang=en , 

© http://www.my-debugbar.com/wiki/IETester/HomePage, 
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这 个 例子 指定 训 览 融 去 加 载 一 个 额外 的 样式 表 。 我 们 将 会 用 这 种 方式 来 解决 我 们 珊 到 的 呈现 
jj 题 。 将 以 上 代码 添加 到 原 有 页 面 的 样式 表 再 明 的 后 面 ， 然 后 在 stylesheets 文件 夹 中 新 建 一 个 叫 
做 ie6.css 的 文件 。 


15.5.2 解决 分 栏 的 问题 


现在 页 面 的 主 区 域 看 起 来 似乎 太 宽 了 一 些 , KKR CEREA Kahte, 容纳 在 侧 边 栏 劳 
边 的 区 域内 ， 所 以 它 就 跑 到 了 侧 边 栏 的 下 方 。 我 们 过 到 了 IE6 的 一 个 bug， 这 个 bug 被 称 作 双 外 
Web bug。 当 一 个 有 左 外 边 距 的 元 素 是 同 左 浮动 的 时 候 ，IE6 会 将 这 个 外 边 距 值 加 倍 。 这 个 bug 
对 拥有 右 外 边 距 的 右 浮 动 元 素 也 是 有 影响 的 。 


最 简单 的 修复 方法 是 为 受 影响 的 元 素 加 上 display:inline 属性 ,解决 这 个 问题 的 实际 过 程 ， 
其 实 征 对 受 影 响 的 元 素 准确 定位 的 过 程 。 
通过 检查 后 发 现 ,，5| 起 双 外 边 距 bug 的 真正 元 凶 其 实 是 main_text 区 域 。 在 为 IE6 准备 的 样 
式 表 里 加 上 下 面 的 代码 ， 辣 题 就 能 解决 了 : 














working_with_ie/stylesheets/ie6.css 


#main_text{display:inline;} 


15.5.3 ”修正 透明 问题 





IE6 不 文 持 PNG 的 alpha 透明 值 ， 但 是 网 络 上 有 成 千 上 万 种 的 解决 方法 。 当 然 了 ， 这 其 中 没 
有 一 个 方法 是 特别 简单 的 ， 而 我 最 喜欢 的 一 个 方法 叫做 TwinHelix 。 


从 那个 公司 的 页 面 上 下 载 修改 包 , 解 压 , 然 后 把 iepngfic.htc 文件 和 Pblank.gif 文 件 放 入 stylesheets 
文件 夹 中 。 

打开 iepngfix.hte 文件 ， 找 到 这 行 代码 : 

if (typeof blankImg == 'undefined') var blankImg = ‘blank.gif'; 

然后 将 它 改 为 : 

if (typeof blankImg == 'undefined') var blankImg = 'stylesheets/blank.gif' ; 


为 了 正常 运行 ，HTC 文件 会 用 一 个 blank.gif 文件 来 完成 透明 的 部 分 ， 而 这 个 文件 需要 的 
blank.g 计 的 链接 征 你 提供 的 , 链接 地 址 应 该 征 blank.gif 相对 于 应 用 了 这 个 方法 的 HTML 文件 位 置 
的 地 址 ， 而 不 古 相 对 于 样式 表 的 地 址 。 


®© http:/www.twinhelix.com/css/iepngfix/, 
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为 index.html 文件 的 条 件 式 注释 加 入 [以 下 代码 : 
working_with_ie/index.html 
<!--[if IE 6]> 
<style> 
#header img{behavior: url(stylesheets/iepngfix.htc) } 


</style> 
<![endif]--> 


这 样 会 载 入 那个 特殊 的 CSS BITE, IEA TES, 


WW FFE] 
SJ 为 什么 我 们 要 手动 修复 这 个 问题 ， 用 已 经 成 型 的 上 E7_js 不 是 更 好 吗 


很 多 开发 者 将 类 似 于 IE7-js 的 项 目 视 为 简单 的 修复 手段 。 但 是 作为 开发 人 员 ， 你 应 该 对 
页 面 中 的 代码 负责 。 如 果 你 能 完全 搞 明 和 白 像 IE7-js 这 种 项 目 中 每 一 行 代码 都 是 做 什么 的 , AH 
么 它 能 让 页 面 兼容 这 些 浏览 器 ,那么 你 才 可 以 没有 顾虑 地 将 这 些 东 西 加 入 到 页 面 之 中 。 但 是 
你 应 该 注意 到 像 IE7-js 这 种 方案 是 很 理想 化 的 方案 , 它 试图 将 所 有 的 情况 都 考虑 在 内 。 ATE 
欢 在 我 自己 的 项 目 中 加 入 额外 的 代码 ， 我 只 需要 能 解决 我 问题 的 代码 。 我 宁愿 只 解决 我 的 问 
题 ， 而 不 是 用 一 个 大 而 全 的 库 。 这 个 大 而 全 的 库 可 能 还 会 跟 我 的 其 他 东西 有 兼容 性 问题 。 

库 和 框架 本 身 都 是 很 好 的 , 但 是 你 需要 对 项 目 中 用 到 的 所 有 东西 都 完全 掌握 , 这 一 点 很 
重要 。 当 出 现 问题 的 时 候 ， 不管 那 段 代码 是 不 是 你 写 的 ， 最终 负责 的 都 会 是 你 ,你 需要 解决 
出 现 的 任何 问题 。 





155.4 ”修复 页 头 图 片 下 面 的 空白 


页 头 图 片 有 一 点 点 内 边 距 ,将 页 面 的 整个 内 容 辐 下 推 了 一 点 ， 于 是 页 面 就 没有 如 我 们 所 期 盼 
的 一 样 和 背景 对 齐 。 在 标准 模式 中 ， 图 像 元 素 是 内 联 元 素 ， 它 们 本 来 应 该 和 其 他 内 容 一 样 跟 标 准 
线 对 齐 ， 在 自己 的 上 方 留 出 一 点 空 en J 字母 。 看 上 去 是 IE6 遵守 了 这 个 标准 ， 而 其 他 的 浏览 
器 在 这 里 则 引入 了 “ 准 严 格 ” 模 式 。 快 速 的 解决 方法 是 将 图 像 的 显 
示 方 式 变 成 block 方式 : 


working_with_ie/stylesheets/ie6.css 





#header img{ 
display:block; 
} 


© http://code.google.com/p/1e7-]s/, 
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这 个 修复 不 难 ， 现 在 将 所 有 东西 都 放 回 原 位 了 。 虽 然 本 可 以 将 这 些 改动 从 IE6 样式 表 中 移 
走 ， 加 入 到 主要 的 布局 样式 中 去 ， 但 是 我 们 只 在 IE6 中 发 现 了 这 个 问题 ， 所 以 这 个 步骤 并 不 是 
必须 的 。 

对 于 IE6 的 修改 到 这 里 就 差不多 了 ,基本 上 所 有 的 东西 都 在 它们 应 该 在 的 位 置 。 现 在 你 可 以 
回忆 一 下 刚刚 的 工作 量 ， 然 后 再 来 权衡 一 下 要 让 网 站 文 持 了 下 6 十 否 值得 : 下 一 个 项 目 可 能 更 加 复 
杂 ， 需 要 更 多 的 修复 工作 , 而 目标 用 户 却 可 能 不 太一 样 。 但 是 ， 即 便 下 个 项 目 同样 需要 支持 TES, 
你 对 那些 前 见 的 问题 和 解决 方案 也 应 该 比较 熟悉 了 。 








小 乔 爱问 ……. 
部 ”这 方法 对 多 个 页 面 有 效 吗 

如 果 网 站 和 应 用 中 有 多 个 页 面 的 时 候 ，HTC 文件 的 相对 路 径 会 随 着 页 面 而 变化 ， 它 的 
地 址 取决 于 HTML 文件 在 页 面 结 构 中 的 位 置 。 这 种 情况 下 ， 你 就 需要 为 HTC 设置 一 个 相对 
于 根 目 录 的 链接 。 这样 做 了 之 后 ,可 能 在 本 地 是 看 不 出 来 效果 的 ， 要 等 部 署 到 服务 器 上 才能 
查看 效果 。 

在 这 个 例子 里 ， 文 件 不 会 部 署 到 服务 器 上 ， 所 以 将 ATC 文件 中 连接 到 blank.gif 4 4) -F 
PAY : 


if (typeof blankImg == ‘undefined' ) 
var blankImg = '/stylesheets/blank.gif'; 


然后 将 HTML 中 调用 HTC 文件 的 语句 移 动 到 ie6.css 中 ， 注 意 修 改 文件 链接 路 径 。 


你 也 可 以 不 用 透明 图 片 ， 但是， 那样 显然 就 不 怎么 美观 了 ， 


15.6 IE8 


现在 ,微软 对 那些 希望 在 “标准 环境 ”下 写 代码 的 开发 者 也 是 越 来 越 友好 了 。IE8 开始 允许 
用 户 使 用 特定 的 呈现 模式 。IE8 提供 了 一 些 可 供 选 择 的 模式 ， 其 中 包括 IES 和 下 7。 根 据 微软 的 
说 法 ，IE8 呈现 模式 提供 了 对 行业 标准 的 民 好 支持 ， 包 括 W3C CSS Level 2.1 规则 、W3C 选择 符 
API 和 对 W3C CSS Level 3 规则 (起草 中 ) 的 有 限 支 持 。 





s 


ep LAR, 但 是 其 中 有 一 个 很 大 的 缺陷 。IE8 的 呈现 模式 并 不 识别 doctype, 但 其 他 浏览 
FE 


器 还 是 依赖 doctype 确定 呈现 模式 。 还 好 ， 微 软 在 IE8 中 还 继承 了 一 个 功能 叫做 IES 仿真 ， 这 个 
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仿真 功能 会 重视 doctype， 用 标准 模式 进行 主 现 ， 并 且 在 将 进入 诡异 模式 的 时 候 上 自动 切换 到 TES 
模式 。 你 应 该 看 一 看 下 面 IES 的 兼容 性 数值 列表 。 





值 描述 

IE=8 网 页 将 支持 IE8 模 式 ， 也 称 作 IE8 标 准 模式 

IE=7 网 页 将 支持 IE7 模 式 ， 也 称 作 IE7 标 准 模式 

IE=EmulateIE8 如 果 网 页 指定 了 基于 标准 的 DOCTYPE 类 型 ， 那 么 网 页 支持 IE8 模 式 ; 和 否则 会 进入 IE 模式 
(诡异 模式 ) 

IE=EmulateIE7 如 果 网 页 指定 了 基于 标准 的 DOCTYPE 类 型 ， 那 么 网 页 支持 IE7 模 式 ， 和 否则 会 进入 IE5 模 式 
(诡异 模式 ) 

IE=Edge 网 页 会 兼容 浏览 器 所 支持 的 下 最 高 版 本 ， 这 个 值 通常 会 在 测试 的 时 候 被 用 到 











为 了 让 下 8 能够 正常 显示 Foodbox 网 页 ， 需要 在 HTML 文档 中 页 头 的 head 标签 之 后 加 上 如 
下 代码 : 


working_with_ie/index.html 


<!--[if IE 8]> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > 
<![endif]--> 


TER, RPPX — BoE RCE in, Area head 元 素 的 打开 标 答 之 后 。 你 应 该 尽早 
写 人 关于 兼容 性 的 代码 ， 至 少 要 早 于 任何 样式 表 和 JavaScript 文 件 的 引入 语句 ， 这 样 CSS 和 脚本 
文件 才能 被 正确 解析 。 一 旦 你 设置 了 这 个 修正 ，IE8 就 可 以 很 顺利 地 工作 了 ， 它 其 至 会 支持 在 打 
印 样式 表 中 用 到 的 高 级 CSS 功能 。 


这 个 方法 的 问题 


在 IE8 中 微软 终于 开始 支持 其 他 训 览 右 已 经 文 持 了 多 年 的 标准 , 但 是 它 并 没有 把 这 种 文 持 设 
置 成 默认 值 ， 所 以 为 了 网 站 能 够 全 部 正确 显示 ， 你 不 得 不 在 每 一 个 页 面 上 都 加 上 那 段 代码 。 但 是 
你 加 上 的 古 一 个 meta 标签 ， 所 以 至 少 这 种 方法 看 起 来 比 用 CSS 或 者 JavaScript 来 解决 问题 要 高 
级 一 些 。 我 个 人 对 这 个 实现 方法 并 不 是 很 热 囊 , 但 是 相 比 较 花 上 数 小 时 来 钻研 脚本 ,我 还 古 会 使 
用 这 个 只 用 一 行 代码 就 能 解决 问题 的 方法 。 


15.7 ”其 他 浏览 诡 


将 网 页 放 在 其 他 阐 览 右 中 看 看 效果 也 不 会 有 什么 损失 。 令 人 开心 的 征 ，Foodbox 在 Mac 的 
Safari 表现 民 好 ， 如 图 15-3 所 示 。 同 样 ， 对 于 采用 了 兼容 标准 的 至 现 引擎 的 Google Chrome ji bi 
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需 来 说 ， 也 不 用 对 页 面 做 出 任何 修改 〈 参 见 图 15-4), 
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Get Cookin’ 


Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your 
friends or make them available to the rest of the 
world! 




















Create an account today and get cookin! 


Latest Recipes 
Stuffed Chicken Breast 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make 
even for beginners. 


Chocolate Pancakes 


This complete-from-scratch classic pancakes recipe is sure to please even the pickiest eater, 


arnacialhs rhmnrnintn In 


15-3 Foodbox 页 面 在 Safari 中 看 着 也 很 好 





c | la] X 


Google Chrome 


Type to search > Dr #&r 


a 





A 
» 
Get Cookin’ 


Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes fram 
renowned chefs or users just like you. You can also 


share your own secret recipes with a few of your Å m \ 
friends or make them available to the rest of the 
world! 


Create an account today and get cookin! 






















Latest Recipes 
Stuffed Chicken Breast 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make 
even for beginners. 


图 15-4 Foodbox 网 页 在 Google Chrome 中 看 起 来 很 不 错 


我 要 指出 的 是 , 这 不 古 因 为 我 们 特别 对 运 , 而 古 我 们 遵照 标准 写 出 一 个 合法 文档 后 理应 得 到 
的 好 结 末 。 由 此 我 需要 指出 ， 不 要 用 IE 进行 开发 ， 那 完全 是 浪费 上 时间。 你 要 做 的 古 在 一 个 与 标 
ERAAI Rar PARR, Aa EAT e EAA A ar ieh EE. 
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15.8 “小 结 


为 了 能 让 网 页 被 更 为 广泛 的 用 户 所 接受 ， 应 该 进行 跨 浏 览 絮 的 开发 。 很 让 我 开心 的 是 ， 这 
种 开发 正 变 得 越 来 越 容 易 。 如 琳 你 遵守 了 标准 , 作品 就 会 运行 正常 。 现在 IE6 正在 退出 舞台 , IE7 
正在 被 TES 取代 ， 各 个 浏 贤 带 之 间 的 差异 正在 慢 慢 绒 小 。 这 对 于 开发 者 和 用 户 来 讲 都 古 一 个 好 
A. 
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可 访问 性 和 可 用 性 


你 需要 考虑 用 户 的 多 样 性 。 比 如 说 ,一 个 色 寞 用 户 能 人 否 正 笛 使 用 你 的 网 站 ? Ee ANE? 或 者 那 
些 无 法 正常 使 用 鼠标 的 用 户 , 他 们 怎么 办 ? 标签 云 中 链接 的 间隔 是 否 因为 太 小 而 导致 协调 运动 技 
能 有 缺陷 的 用 户 无 法 使 用 ? 


另外 ， 那些 网 速 很 慢 的 用 户 怎 么 办 ?对 他 们 而 言 ， 页面 的 载 入 速度 是 否 够 快 ? 还 有 ， 在 移动 
设备 上 ， 比 如 手机 ， 你 的 页 面 表现 如 何 ? 


对 于 程序 员 来 讲 ， 这 些 关 于 可 访问 性 和 可 用 性 的 概念 也 许 会 显得 比较 陌生 。 这 些 话题 也 是 最 
近 才 开始 流行 的 。 在 本 章 中 ,你 会 了 解 面 对 不 同 用 户 时 遇 到 的 不 同 问题 ， 以 及 如 何 改进 网 站 让 它 
变 得 人 人 可 用 。 


16.1 可 访问 性 对 你 来 说 意味 着 什么 


跟 网 页 开发 人 员 聊 天 的 时 候 ， 我 总 喜欢 问 他 们 这 个 问题 : 听 到 可 访问 性 这 个 词 ， 你 会 想到 什 
A) 那些 各 种 各 样 的 答案 通常 都 很 有 意思 。 有 些 人 完全 不 知道 还 有 这 样 一 个 概念 , 有 些 人 认为 这 
个 东西 是 专 为 残疾 人 准备 的 一 可 访问 性 包含 的 内 容 远 不 止 于 此 ， 它 其 实 泛 指 跟 “ 页 面 访 问 ” 有 
关 的 问题 。 

当 评价 一 个 应 用 或 者 网 页 是 否 具有 可 访问 性 的 时 候 , 是 说 这 个 东西 可 以 被 任何 用 户 以 任何 互 
动 方式 查看 或 者 使 用 。 这 包括 了 跟 残 疾 人 相关 的 辅助 技术 ,但 同时 也 跟 那 些 用 旧式 电脑 、 低 速 互 
联网 、 移 动 电话 、PDA 或 者 游戏 终端 的 用 户 有 关 。 这 并 不 是 说 页 面 需要 在 所 有 的 平台 上 都 保持 
一 致 , 但 至 少 它 能 够 在 这 些 地 方 帮 助 用 户 达 到 其 想 达 成 的 目标 一 无 论 用 户 是 想 查找 信息 、 阅 读 
文档 或 者 是 购物 。 

如 果 网 站 只 在 开启 JavaScript 的 时 候 才 可 以 正常 使 用 , 那么 它 就 不 具备 可 访问 性 。 因 为 并 不 是 
所 有 浏览 器 都 支持 JavaScript, 也 不 是 所 有 用 户 都 会 开启 它 , 而 且 ， 并 不 是 所 有 浏览 器 都 会 用 同一 
种 方式 解析 JavaScript。 
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如 果 网 站 必须 在 用 户 安装 了 Flash 之 后 才能 正 第 工作 ， 即 便 它 的 菜单 动画 绚丽 无 比 ， 它 也 不 
具备 可 访问 性 。 如 采 因 为 客户 的 iPhone 上 没有 安装 Flash 而 无 法 单 击 菜单 项 ， 那 最 终 你 可 能 会 失 
去 那 部 分 客户 。 

如 采 网 站 上 的 图 片 太 多 导致 那些 网 速 很 慢 的 用 户 无 法 使 用 〈 是 的 ， 还 有 这 样 的 用 户 ) ， 那 么 
网 站 在 可 访问 性 上 也 存在 问题 。 


如 条 你 跟 大 多 数 程序 员 疫 两 样 ， 第 一 反应 可 能 就 是 必 须要 用 像 Flash 和 JavaScript 这 样 的 技术 
来 让 网 站 更 吸引 人 人、 可 用 性 更 佳 并 且 更 有 苋 争 力 。 这 个 理由 是 很 恰当 的 。 像 Gmail， 如 朱 少 了 对 
Ajax 鸭 支 持 ， 它 会 变 得 非 弟 难 用 。 但 古 即 便 会 功能 不 全 ， 在 没有 Ajax 的 情况 下 ，Gmail 还 是 可 用 
的 。Google 把 这 个 不 完整 的 Gmail 做 成 了 一 个 可 以 正 第 使 用 的 东西 , 虽然 它 比 第 规 版 要 宁 重 很 多 。 

网 站 应 该 是 人 人 可 读 并 且 人 人 可 用 的 。 它 可 以 没有 太 绚 丽 的 外 表 或 者 多 么 流畅 的 使 用 感 , 但 
是 它 应 该 能 够 让 用 户 达 到 他 们 的 目的 。 


16.2 关于 可 访问 性 的 基础 问题 


这 一 市 涵 一 了 关于 可 访问 性 的 基础 问题 。 








双 目 失明 的 人 通常 需要 使 用 屏幕 阅读 器 , 特别 是 那 种 可 以 通过 页 面 上 的 文字 自动 合成 声音 的 
软件 。 市 面 上 有 好 几 种 屏幕 阅读 软件 包 , 包括 比较 受 欢迎 的 JAWS。 考虑 到 软件 各 自 支 持 的 特性 ， 
它们 各 有 各 的 优 缺 点 。 


1. 屏幕 录像 、 视 频 和 页 面 导 览 

几乎 所 有 新 网 站 都 有 类 似 于 页 面 导 览 的 东西 ， 要么 是 一 些 截图 ， 要么 是 一 段 视频 简介。 当 设 
计 一 个 导 览 或 者 屏幕 了 永 像 的 时 候 ， 要 考虑 到 这 些 东 西 对 于 育 人 用 户 的 使 用 感受 。 当 你 为 屏幕 了 永 像 
设置 语音 辅助 的 时 候 , 注意 语言 风格 ， 要 让 解说 听 起 来 跟 转 播 比 赛 一 样 ， 要 癌 观 众 摘 述 正在 发 生 
的 事情 一 一 不 要 只 说 “ 单 击 这 里 ， 而 要 摘 述 “选择 “新 的 薪 谱 ”这 个 链接 。 即 便 是 少量 的 描述 ， 
对 盲人 甚至 是 有 视力 障碍 的 人 来 说 ， 都 是 有 重要 意义 的 。 

同样 地 ， 你 也 应 该 对 图 片 形式 的 导 览 做 同样 的 处 理 , 在 图 注 中 用 描述 性 的 语言 做 标注 。 这 会 
增强 用 户 使 用 时 的 愉悦 感 。 


2. 颜色 


如 采用 户 是 盲人 ， 那 他 们 上 自然 也 不 会 对 页 面 上 的 颜色 有 反应 。 之 前 我 们 花 了 一 整 章 的 内 容 
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讨论 如 何 利 用 不 同 的 颜色 来 调动 用 户 的 情感 。 遗憾 的 是 , EMA ae A BA, A, 
你 要 利用 其 他 方法 来 向 他 们 传递 一 些 重要 信息 。 比 如 ,以 前 可 能 会 用 不 同 的 颜色 来 标注 表单 提 
交 后 的 错误 信息 ， 现 在 你 可 能 要 将 错误 信息 的 表述 列 在 表单 项 部 了 。 这 些 信息 可 能 需要 用 
strong 或 者 em 标签 标注 出 来 。 很 多 屏 硕 阅读 如 部 会 把 被 这 些 标记 包括 的 内 容 读 出 来 ，[ 引 
起 用 户 注意 。 








3. alt 属 性 


9.4.7 市 的 “上 默认 文字 ” 框 注 中 ,我 们 曾经 对 alt 属性 有 过 一 些 讨论 。alt 可 能 是 最 广 为 
人 知 的 增强 页 面 可 访问 性 的 途径 。 然 而 ， 如 末 使 用 有 误 ， 它 也 会 给 屏幕 阅读 絮 用 户 带 来 很 多 
烦恼 。 


alt 属性 的 作用 是 给 图 片 加 上 描述 性 信息 。 但 是 很 多 网 页 开发 者 当 作 一 个 任务 般 的 事情 来 
处 理 ， 所 以 他 们 时 币 会 随意 地 写 一 些 信息 ， 黄 至 有 时 候 只 把 文件 名 再 打 一 过 一 一 后 者 更 加 要 
不 得 。 


大 部 分 屏幕 阅读 磺 用 户 都 不 需要 听 到 诸如 “公告 、 “对 钧 ”或 者 “一 个 罕 着 红 毛 衣 的 女士 - 
的 信息 。 


如 采 页 面 上 的 那 张 图 片上 只 下 为 了 汪 炳 而 设计 的 ， 那 么 它 的 alt 属性 留成 空 日 就 可 以 了 : 


<img src="/images/circle.gif" alt=""> 


更 好 的 方式 其 实 是 将 这 些 美化 页 面 的 元 素 放 入 样式 表 里 面 ， 只 在 HTML 文档 中 留 下 跟 内 容 
相关 的 图 片 。 警 如 可 以 用 下 面 的 方式 来 实现 图 片 样式 的 列表 : 


ul{ 
list-style-image: url("/images/circle.gif"); 


$ 

用 户 真正 想 听 到 的 内 容 ， 可 能 是 图 片 中 的 文字 ， 或 者 是 图 表 中 的 “产品 生产 地 ”信息 。alt 
里 要 么 征 跟 和 内容 相 关 的 摘 述 信息 ,要 么 克 留 为 空 日 。 但 征 一 定 要 写 上 alt 属性 , KE Ahir ik 
at IPSS AB) ZAMIR ZS AY alt 属性 。 

Boa, 5 alt Ja PERI, DZH “ike SKA AEA” ROCA. ee bel ii at TED 
alt 属性 时 会 告诉 用 户 它 遇 到 了 一 张 图 片 ， 所 以 用 户 其 实 已 经 知道 他 将 要 听 到 的 内 容 是 一 张 图 
F Te 


4. 图 表 


对 于 请 人 来 说 ， 图 表 类 图 乒 几 乎 是 没有 意义 的 ， 除 非 你 能 为 这 些 图 表 提 供 一 些 描述 。 除 
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了 之 前 提 到 的 alt 属性 之 外 ，img 标签 还 提供 了 另外 一 种 叫做 longdesc 的 属性 。 这 个 属性 可 
以 用 来 摘 述 图 表 。 大 多 数 情 况 下 诡 加 图 标 描述 都 是 有 益 于 用 户 的 ， 特 别 是 摘 述 非常 详细 的 
时 候 。 


5. 拼写 和 语法 








页 面 上 的 文字 是 可 读 的 ， 屏 幕 阅 读 套 通 前 能 很 好 地 运行 。 在 项 充 页面 内 容 的 时 候 ， 一 定 要 特 
别 注 意 保 证 文字 意思 明确 、 书 写 正确 以 及 语法 无 误 。 语法 和 句子 结构 很 重要 ， 因 为 屏幕 阅读 融会 
读 出 它 扫 摘 到 的 每 个 字 。 想 想 那 些 同 字 不 同音 的 例子 。 像 “重音 ”这 个 单独 的 词 ， 到 底 应 该 是 重 
量 的 重 , 还 古 重 复 的 重 ? 你 肯定 和 弄 不 清 。 同 样 地 ， 如 来 你 在 写 句 子 的 时 候 不 注意 ， 屏 磊 阅 读 带 也 
弄 不 消 。 屏 短 阅 读 右 会 尽量 通过 上 下 文 的 联系 紧密 程度 来 做 出 判断 , 但 是 它 依赖 的 是 文革 中 的 正 
确 书 写 和 语法 。 


把 每 个 字 都 写 正确 也 非常 重要 。 想 象 一 下 如 末 你 漏 写 了 一 个 单词 中 的 一 个 字母 , 那 会 对 屏 项 
阅读 辟 造 成 多 大 的 困扰 啊 ! 


a, IRR. HERMES So. SD Pb ASA. DARA hk, Be Bal ise a 
BFR HBC 7S Ta EERE SH We, GRRE tas EA EP, DBA 
理解 内 容 。 

我 通常 会 完 用 电脑 检查 一 志 目 己 的 语法 和 拼写 , 然后 再 找 一 个 人 帮 我 校对 。 如 琳 有 其 他 人 帮 
你 写 内 容 更 好 , 但 十 一 定 要 自己 做 一 所 校对。 即便 是 客户 给 你 的 文本 ,如果 放 在 网 上 之 后 发 现 了 
打印 、 语 法 和 书写 和 错误， 最 后 挨 乌 有 的 还 古 你 。 


























我 的 校对 规则 


我 写 过 很 多 东西 ， 从 内 部 文档 到 博客 以 及 这 本 书 ， 都 是 我 的 写作 范畴 。 当 然 , 在 写作 的 
时 候 我 经 党 犯错 ,为 此 ,我 形成 了 一 套 自己 的 校对 措施 。 在 持续 使 用 的 情况 下 ,我 的 这 个 措 
施 还 是 非常 有 效 的 。 


首先 ， 大 上 声 妆 读 你 写 的 东西 ， 如 果 能 够 不 发 笑 地 顺利 读 下 来 ,那么 第 一 步 算 是 成 功 了 。 
其 次 把 句子 倒 着 读 一 遍 ， 这 样 除去 语 境 的 阅读 可 以 帮助 你 发 现 重 复 字 词 和 书写 错误 。 


最 后 ， 找 另外 一 个 人 来 帮 你 读 一 遍 ， 这 样 你 就 能 听 听 自己 写 的 东西 了 。 这 一 步 很 重要 ， 
它 还 可 以 获取 他 人 对 你 文章 的 反馈 
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6. JavaScript 和 Ajax 


JavaScript 和 Ajax 技术 让 程序 员 有 能 力 去 创造 更 丰富 的 用 户 界面 ， 比 如 说 可 以 做 到 让 用 户 在 
一 个 页 面 上 编辑 内 容 ， 而 不 是 跳 转 到 一 个 表单 ， 你 还 能 根据 用 户 输入 的 内 容 来 显示 和 隐藏 某 些 页 
面 。 另 外 ， 这 两 个 技术 还 能 在 页 面 内 弹出 对 话 框 加 载 页 面 ， 就 像 Lightbox 一 样 ， 从 而 淘汰 掉 老 
HEJA E ZF TERTE. 

PAT ERA EF, BARKL BORE hel Ras PRC JavaScript 和 Ajax， 但 实际 上 很 
REA ikar A ACRE EN]. EER SKA SRA E, DER iR aS (ELE 2 PE 
哪 一 部 分 页 面 发 生 了 变化 。 当 你 开发 页 面 的 时 候 应 该 保证 所 有 的 基本 功能 在 设 有 JavaScript 的 时 
候 也 可 以 正常 运行 ， 那些 基于 JavaScript 的 华丽 特点 ， 则 是 根据 需求 而 加 上 的 对 功能 的 补充 。 这 
样 一 来 你 不 但 能 建造 一 个 “ 进 可 攻 退 可 守 ” 的 网 站 ， 而 且 不 会 在 可 访问 性 出 差错 之 后 才 去 亡 羊 
Ab AE 

比如 说 要 做 一 个 Ajax MRE, ERMA i Le Le eee, PA Fa R Hh ik Ze oe 
动 ， 让 它 具 有 Ajax WIRE. E RERS shin, FARIS Ee EM ig Ajax 请 求 。 前 
者 可 能 会 在 一 个 新 页 面 中 打开 表单 ， 而 Ajax 请 求 则 会 返回 一 个 JavaScript， 回 应 已 经 改变 了 原 
有 页 面 的 形式 和 内 容 。 这 个 实现 过 程 并 不 会 消耗 太 长 的 时 间 ， 却 为 更 多 的 用 户 提 供 了 民 好 的 使 
用 体验 。 

你 应 该 用 不 同 的 屏 希 阅读 如 来 测试 页 面 ， 看 看 它们 是 怎么 处 理 网 站 有 的。 同时 ， 那 些 生 成 屏蔽 
陪读 龙 的 公司 也 在 不 断 努 力 ， 为 了 让 网 络 变 得 更 友好 。 

如 果 在 建站 的 时 候 能 够 一 直 关 注 这 些 问 题 ， 那 么 对 于 用 户 来 讲 ， 你 创造 的 东西 会 更 加 友好 。 
为 图 片 加 上 详尽 的 描述 能 帮助 用 户 更 好 地 理解 段落 内 容 。 检 查 语 法 和 书写 则 是 你 必须 要 做 的 工 
作 ， 而 用 户 界面 的 “去 功能 化 ” 则 能 让 那些 没有 用 复杂 六 览 右 的 用 户 使 用 你 的 网 页 。 有 时 候 我 会 
用 手机 浏览 互联 网 ， 但 是 有 几 个 我 很 喜欢 的 Web2.0 网 站 却 不 支持 手机 访问 |。 

7. Google 也 看 不 见 
还 有 其 他 搜索 引擎 一 一 也 是 “ 育 人 ” ， 它 们 会 跟 屏 幕 岗 读 袁 一 样 ， 去 分 析 你 的 页 
面 。 一 些 特定 的 内 容 ， 像 图 片 、 视 频 、 图 表 和 Flash， 也 是 不 能 被 分 析 的 。 有 时 ， 页 面 结构 也 会 
妨碍 用 户 使 用 。 

我 品 你 推荐 基于 文字 的 训 览 器 ， 用 它们 来 检查 页 面 的 可 访问 性 ， 比 如 说 你 可 以 用 Lynx ( 参 
WRI 16-1)。, 或 者 你 还 可 以 尝试 着 将 麟 览 絮 里 的 CSS、JavaScript 和 图 片 去 掉 , 然后 浏览 这 个 网 页 。 














Google 


© http:/www.huddletogether.com/projects/lightbox2/, 
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这 样 的 方式 可 以 让 你 对 网 站 的 可 访问 性 有 个 大 概 的 了 解 , 同时 你 还 可 以 大 概 知道 在 搜索 ?引擎 腿 中 
网 站 古 什么 样子 的 。 


‘opular Ingredients 


bet Cookin. 


Foodbox is the best way to collect and share recipes with the rest of the world. You can build your own recipe book from thousands of 
great recipes from chefs 0 ers just like . You can also share your own secret recipes with a few of your friends or make 
them av oi Lo ES to the rest of the world! 


Create an account today and get cookin! 
Si 1 门 L á Lc q l n 


atest Recipes 


4 lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make even for beginners. 


This complete-from-scratch classic pancake ecipe is sure to please even the pickiest eater, especially chocolate lovers. 


Copyright © 2668 Foodbox, LLC, all rights reserved. 


ce | Privacy Polic! 


Text entry field) Enter text. Use UP or DOWN arrows 
sae ee xt into tna Ue ld by typing. o on the ke yboard 





16-1 在 Lynx 中 的 Foodbox 


16.2.2 ”色盲 用 户 


如 果 你 在 页 面 上 用 颜色 传递 重要 信息 , 色盲 用 户 可 能 会 遇 到 问题 。 色盲 用 户 通 
两 种 颜色 ， 比 如 说 无 法 分 辨 绿 和 红 ， 或 分 不 清 红 和 黑 。 


因此 , 在 设计 图 表 和 页 面 上 其 他 区 域 的 时 候 ， 要 注意 颜色 的 搭配 具有 足够 的 对 比 度 。 如 采 你 
在 一 个 秋色 的 背景 上 写 上 了 红色 的 字 ， 那 么 有 些 色 育 用 户 可 能 完全 无 法 辨认 出 来 。 


红 绿 色盲 








红 绿 色 宦 古 最 第 见 的 两 种 色 官 。 有 这 种 色 宦 症 的 人 群 无 法 区 分 红色 和 绿色 。 








在 图 16-2 中 你 能 看 到 红色 讶 眼中 的 Foodbox, 注意 看 肉 丸 上 的 红色 酱 料 ， 它们 在 红色 盲 眼中 


是 深 灰色 ， 而 整个 页 面 的 颜色 则 仿 标 色 。 也 就 是 说 对 于 这 群 用 户 ， 红 色 其 实 是 某 种 很 暗 的 颜色 。 
所 以 在 为 页 面 选 择 配色 的 时 候 要 注意 到 这 一 点 


JNO 
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ae. | 
Get Cookin 
Foodbox is the best way to collect and share recipes 
with the rest of the worid. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your 
friends or make them available to the rest of the 
world! 












Create an account today and get cookin! 


Latest Recipes 
Stuffed Chicken Breast 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make even 
for beginners. 


Chocolate Pancakes 


This complete-from-scratch classic pancakes recipe is sure to please even the pickiest eater, 
asnerially chocolate Inver 


图 16-2 ”在 红色 色盲 用 户 眼 中 的 Foodbox ( 另 见 彩 插 ) 


绿色 盲 症 的 情况 跟 红 色盲 差不多 ,只 是 对 于 这 种 患者 而 言 ， 红色 和 绿色 没有 什么 分 别 。 在 图 
16-3 中 你 可 以 看 到 他 们 眼中 的 Foodbox 也 很 与 众 不 同 。 

















Zo ba 








Get Cookin’ 


Foodbox is the best way to collect and share recipes 
with the rest of the world. You can build your own 
recipe book from thousands of great recipes from 
renowned chefs or users just like you. You can also 
share your own secret recipes with a few of your 
friends or make them available to the rest of the 
world! 




























Create an account today and get cookin! 


Latest Recipes 
Stuffed Chicken Breast 


A lightly breaded breast of chicken stuffed with mushrooms and Swiss cheese. Easy to make even 
for beginners. 


Chocolate Pancakes 


This complete-from-scratch classic pancakes recipe is sure to please even the pickiest eater, 


图 16-3 ”绿色 育 的 用 户 眼 中 的 Foodbox ( 另 见 彩 插 ) 


蓝 色 盲 很 罕见 ， 这 种 色盲 的 症状 是 无 法 分 清 蓝 色 和 黄色 。 在 这 类 人 群 腿 中 ，Foodbox 的 网 页 
看 起 来 偏 粉 (参见 图 16-4)。 
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Get Cookin 
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drinks pasta italian with the rest of the u can S gt mm P | 
recipe book from thousands of great recipes from 
chicken pork renowned chefs or users just like you. You can also 
share your own seci cipes Wi of your 
S friends or make them available to the rest of the | 
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oregano garlic black beans Create an account today and get cookin! i 
apples bananas cheese ny i - 
Latest Recipes 
lettuce chicken 
Stuffed Chicken Breast 
tly ed ed with ‘oo! chee: 


Chocolate Pancakes 


16-4 WG EAA PRAY Foodbox ( 另 见 彩 插 ) 
16.2.3 有 视觉 缺陷 的 人 


有 视 党 缺陷 的 人 遇 到 的 问题 可 能 不 会 那么 明显 和 直接 , 他 们 通 员 会 用 像 ZoomText 或 是 OS X 
目 融 的 放大 软件 。 所 以 你 并 不 用 太 担 心 字 体 的 大 小 一 一 当然 用 太 小 的 字体 肯定 不 行 。 


但 是 ， 放大镜 也 是 有 缺陷 的 。 视 觉 有 缺陷 的 用 户 通 常会 把 注意 力 集中 在 他 们 放大 的 区 域 , 而 
忽略 屏 融 上 的 其 他 内 容 一 一 就 像 罕 过 一 个 纸 简 看 屏幕 一 样 , 你 不 得 不 将 纸 简 移 来 移 去 才能 看 到 所 
有 的 东西 。 所 以 会 有 些 内 容 古 设计 师 需 要 你 看 到 却 被 你 忽视 了 的 。 从 开发 者 的 角度 来 讲 ， 无 法 探 
制 人 们 使 用 可 访问 性 工具 。 那 么 该 怎么 解决 这 个 问题 呢 ?” 你 应 该 结构 化 页 面 , 达到 让 用 户 扔 掉 放 
大 工具 的 目的 。 

通 第 视觉 缺陷 用 户 并 不 喜欢 那些 单独 为 他 们 开发 的 页 面 , 就 像 其 他 残疾 人 一 样 ,他 们 希望 被 
平等 地 对 每 。 如 末 开 发 者 没有 为 这 些 单独 的 页 和 面 做 持续 的 更 新 ,他们 会 更 郁 问 。 我 磁 过 几 次 类 似 
的 事情 ， 搞 得 很 不 愉快 。 

我 平日 会 经 第 使 用 辅助 性 工具 ,如 放大 工具 ,而 我 的 建议 是 让 用 户 自己 去 操心 工具 的 使 用 问题 ， 
开发 者 则 应 该 想 办 法 将 重要 的 信息 放 在 一 起 , 这 才 是 你 们 应 该 操心 的 地 方 。 那些 需要 放大 工具 的 用 
户 都 有 自己 的 软件 , 在 网 络 应 用 中 ,IE7、FireFox 和 Opera 都 有 让 用 户 放 大 整个 页 面 的 工具 。 而 PC 
或 者 Mac 中 一 些 全 屏 放 大 工具 可 以 将 整个 使 用 空间 放大 ， 而 不 单单 针对 六 览 器 。 


16.2.4 有 了 听力 缺陷 的 用 户 


网 络 也 还 算是 视觉 媒介 ， 越 来 越 多 的 网 站 开始 用 视频 来 展示 页 面 功能 , 或 者 古 共 享 信息 。 诚 
然 ， 昕 力 障 碍 用 户 是 可 以 看 视频 的 , 但 大 你 没有 为 视频 或 屏幕 录像 配 上 解说 文字 、 标 题 或 者 是 字 
幕 ， 那 么 这 些 用 户 肯 定 会 有 种 被 遗忘 感 。 如 末 你 在 经 营 一 个 播客 ， 请 记 住 在 广播 的 同时 ， 为 那些 
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听力 有 障碍 的 用 户 提 供 一 份 可 以 点 击 的 解说 图 。 

老人 、 退 伍 军 人、 婴儿 潮 时 代 出 生 的 用 户 可 能 出 现 听力 障碍 ， 现 在 的 年 轻 人 中 有 听力 障碍 
的 人 的 百分比 也 在 极速 上 升 ， 所 以 你 不 能 忽略 这 些 用 户 。 如 果 你 在 页 面 上 提供 了 有 声 视 频 ， 记 
得 声 轨 的 音量 要 大 , 并 且 在 小 音量 的 时 候 ， 声 首 质 量 也 要 清晰 一 一 这 样 做 可 以 保证 用 户 能 够 调整 
到 适合 他 们 的 音量 大 小 。 


16.2.5 ”行动 障碍 和 没有 鼠标 的 用 户 

我 们 的 服务 对 象 或 者 产品 的 使 用 者 ， 他 们 的 设备 不 一 定 束 和 我 们 目 己 使 用 的 设备 古 一 样 的 ， 
而 作为 计算 机 的 日 第 使 用 者 , 我 们 时 第 会 志 记 这 一 点 。 璧 如 有 的 用 户 因 为 手 部 残疾 或 者 肌肉 萎缩 
而 无 法 操作 鼠标 ， 他 们 可 能 会 使 用 鼠标 的 替代 品 。 另 外 ， 育 人 用 户 也 不 是 用 鼠标 剖 览 的 。 

那么 这 些 用 户 如 何 训 览 网 页 呢 ? 有 些 人 会 用 一 种 特殊 的 管子 , 当 他 们 吸 气 或 者 吹 气 的 时 候 鼠 
标 指针 就 会 移动 ; 还 有 一 些 用 户 只 能 用 键盘 。 另 外 还 有 那些 讨厌 鼠标 只 喜欢 用 快捷 键 的 程序 员 们 。 

那些 使 用 键盘 的 用 户 依 靠 的 古 快 捷 键 和 Tab 键 ， 你 需要 试 试 他 们 的 浏览 习惯 ， 只 用 键盘 ， 然 
后 记录 下 过 到 的 问题 。 你 是 否 用 了 请 块 控 件 ? 那 就 要 记 住 为 它 加 上 一 个 可 以 让 用 户 输入 的 区 域 。 
另外 , 你 是 否 用 到 了 那 种 需要 鼠标 单 击 才 能 激活 页 面 输入 区 域 ? 总 之 底线 很 明确 , 不 要 让 你 的 网 
页 完全 依靠 鼠标 操作 。 

最 后 ， 记 得 不 要 用 “ 单 击 ”这 个 字眼 ， 比 如 说 不 要 用 “ 单 击 这 里 ”。 因 为 这 个 词 瞳 示 着 用 户 
征 使 用 鼠标 的 ， 但 是 并 不 是 所 有 人 都 用 鼠标 。 如 采 你 有 一 个 “ 单 击 碍 看 更 多 ”的 链接 ,不 妨 把 它 
改 成 “更 多 信息 ”这 样 的 链接 会 更 好 一 些 。 如 采 网 页 的 可 用 性 做 得 好 ， 用 户 会 上 自然而然 地 知道 如 
何 去 操 作 以 获得 “更 多 信息 。 其 实 我 个 人 认为 ， 人 们 之 所 以 会 使 用 “ 单 击 ” 这 个 词 ， 十 因为 看 
到 其 他 人 都 在 用 ， 我 在 这 里 呼吁 大 家 打破 这 种 常规 。 

16.3 包容 一 切 

当 我 们 说 一 个 网 站 可 访问 的 时 候 , 指 的 古 它 能 被 所 有 的 用 户 使 用 。 如 末 在 页 面 上 使 用 了 大 多 
的 Flash 和 JavaScript， 那 么 应 该 萎 虑 到 那些 没有 这 些 功能 的 用 户 ， 他 们 如 何 同 页 面 互动 。 当 然 ， 
这 并 不 意味 着 你 要 在 建造 新 页 面 的 时 候 戎 站 展 脚 , 只 洽 虑 最 通用 的 标准 一 一 毕 芝 让 网 站 有 苋 争 力 
也 是 很 重要 的 。 但 是 你 应 该 尽量 为 更 多 的 用 户 提 供 访问 途径 。 


在 我 写 这 本 书 的 时 候 , Hulu 用 的 是 Flash 来 播放 我 爱 看 的 剧 集 视频 , 这 个 网 站 也 是 我 最 喜爱 








© 婴儿 潮 (Baby Boom) 主要 指 美国 第 二 次 世界 大 战 后 的 一 段 时 期 (1946 一 1964)， 这 18 年 间 出 生 人 口 达 到 7 800 
万 人 。 编者 广 

@ MiracleEar 是 一 家 助 听 公 司 ， 它 的 报告 称 “ 有 15% 的 大 学 毕业 生 的 听力 衰退 程度 跟 他 们 父母 的 相当 或 更 严重 ”。 

© http://www.hulu.com/, 
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的 几 个 网 站 之 一 。 但 是 我 不 能 在 我 的 iPod 上 看 这 些 视 频 ， 因 为 iPod 不 支持 Flash。 田 一 方面 ， 
YouTube 虽然 也 用 的 是 Flash, 但 是 在 iPhone 发 布 之 后 ， 人 们 也 可 以 在 Pod 或 者 iPhone 上 看 它 的 
视频 了 。 虽 然 选 择 Flash 对 于 Hulu 来 说 是 一 个 不 错 的 决定 ， 毕 况 大 多 数 用 户 的 设备 上 都 是 Flash, 
而 非 QuickTime 或 者 是 Windows Media。 但 是 如 果 YouTube 可 以 让 它 的 视频 在 非 Flash 设备 上 下 
常 播放 ， 那 么 Hulu 应 该 也 能 做 到 ”。 

当然 ，Hulu 并 没有 承诺 说 可 以 在 iPod 上 看 视频 ， 我 只 是 用 这 个 例子 来 说 明 一 个 现象 ， 那 就 
是 你 的 一 个 关于 技术 的 决定 是 如 何 将 一 部 分 用 户 拒 之 门 外 的 。 所 以 当 你 决定 要 实现 一 个 比较 新 颖 
的 技术 的 时 候 ， 一 定 要 萎 虑 这 个 决定 对 不 同 的 用 户 群 会 产生 怎样 的 影响 。 





16.3.1 Sar 





在 不 知情 的 情况 下 限制 用 户 浏 览 网 页 的 方式 , 是 终结 一 个 网 站 生命 的 有 效 方法 。 导 航 异 常 重 
要 。 如 果 导 航 是 一 个 下 拉 菜 单 ， 那 么 请 保证 用 别 的 方法 也 能 取得 菜单 中 的 入 口 。 因 为 用 老式 浏览 
器 或 者 是 屏幕 阅读 絮 的 用 户 是 无 法 使 用 下 拉 菜 单 的 , 他 们 只 能 看 到 顶级 目录 的 那个 选项 ,为 了 解 
决 这 个 问题 ， 你 需要 制作 一 个 “着 陆 页 ， 这 个 页 面 会 包含 下 拉 这 单 里 的 所 有 和 链接。 起 初 ， 这 个 
方法 似乎 没有 那么 完美 , 但 是 它 除 了 带 来 可 访问 性 方面 的 好 处 之 外 , 还 会 为 市 场 部 的 同事 提供 一 
个 额外 的 机 会 ， 让 他 们 能 够 添加 一 些 有 质量 的 关键 字 和 内 容 。 

我 还 见 过 无 数 使 用 Flash 影片 做 系统 菜单 的 网 站 。 虽 说 很 多 人 的 家 用 电脑 里 装 有 Flash, 这 种 
方法 还 是 会 给 那些 使 用 屏幕 阅读 器 、 手 机 或 者 PDA 上 的 浏览 器 的 用 户 带 来 使 用 问题 。 不 应 让 用 
户 为 了 浏览 你 的 网 站 而 去 下 载 安装 额外 的 软件 。 我 的 意思 也 不 是 说 不 能 用 Flash 做 导航 ， 但 是 你 
需要 为 特定 的 用 户 提 供 一 种 “ 绕 行 ”的 方式 。 





W Ip 
YU HS Flash 也 是 具有 可 访问 性 的 ， 对 吧 


如 果 由 Adobe 来 回答 这 个 问题 , 那 答 案 会 是 肯定 的 ,在 Adobe 收购 Marcromedia 的 时 候 , 
它 着 实 为 可 访问 性 操 了 心 ， 而 后 者 也 一 直 在 让 它 产 品 的 可 访问 性 变 得 更 好 。 问 题 在 于 ， 即 便 
Flash 视频 本 身 是 有 可 访问 性 的 ， 它 的 具体 实现 也 依赖 于 那个 发 布 视频 的 人 。 即 便 发 布 视频 
的 人 做 到 了 这 一 点 ， 它 对 屏幕 阅读 器 也 仍旧 不 是 那么 友好 。 去 下 一 份 JAWS 或 者 是 
Window-Eye 的 试用 版 ,看 看 它们 在 页 面 上 表现 如 何 。 这 其 实 也 是 老生 常 谈 了 : 测试 ， 测试， 
再 测试 。 


O 当然 ， 这 里 也 可 能 之 扯 到 了 杂 些 法 律 条 球 的 问题 。 
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16.3.2 处理 出 错 信息 

如 何在 网 页 上 显示 错误 信息 ?如 琳 你 准备 使 用 弹出 窗口 , 那 你 要 考虑 到 有 行动 障碍 的 用 户 关 
闭 这 些 窗口 的 难度 会 很 大 。 如 采 你 用 另外 一 种 颜色 《比如 红色 ) 来 表示 错误 信息 ， 那 色 宦 用户 可 


能 根本 就 不 会 注意 到 它 。 男 外 ， 如 琳 你 用 Ajax 做 表单 认证 ， 有 些 屏 项 阅读 融 也 不 会 加 以 识别 。 
那 到 搬 我 们 应 该 怎么 办 呢 ? 





Ruby on Rails 里 内 置 的 scaffold 提供 了 一 个 很 好 的 处 理 表 单 验证 的 例子 。 一 旦 用 户 输 入 了 
不 合法 的 数据 ， 表 单 会 被 刷新 显示 ， 页 面 上 会 多 出 一 块 显示 错误 信息 的 地 方 。 信 息 中 还 包括 了 
对 已 出 现 问题 的 简短 描述 。 另 外 scaffold 还 会 用 红色 标记 出 表单 中 出 错 的 项 目 ， 并 为 它们 加 上 
粗 边 框 。 


这 个 方法 还 有 改进 的 余地 ， 比 如 说 将 错误 信息 显示 在 错误 项 的 附近 。 这 也 不 失 为 一 个 很 好 的 
方法 ， 因 为 它 没有 单单 依靠 颜色 的 变化 来 显示 有 问题 出 现 。 





16.3.3 ” 跨 浏 览 器 测试 


在 第 15 革 中 ,我 们 讨论 了 跨 剂 咒 带 的 相关 问题 ,在 那 一 革 里 针对 TE 和 其 他 训 览 右 对 Foodbox 
作 了 一 些 调整 。 类 似 地 ， 我 们 将 在 第 19 草 中 讨论 如 何 应 付 移动 设备 。 除 了 一 句 “ 跨 训 览 右 征 
访问 性 的 一 个 重要 组 成 之 外 ， 其 他 的 似乎 也 设 有 可 以 多 说 的 了 。 记 住 你 的 最 终 目 标 一 一 让 尽 可 
能 多 的 人 可 以 成 为 你 的 用 户 。 


16.4 重要 的 商业 问题 


网 站 建设 是 一 个 苋 争 异 第 油 烈 的 市 场 , 这 可 能 会 影 啊 到 你 的 网 站 的 可 访问 性 。 如 来 你 的 愿望 
征 建 造 一 个 5| 人 入 胜 、 技 术 领 先 、 创 新 且 有 商业 魅力 的 网 站 ， 那 么 束 不 得 不 面 对 这 样 一 个 局 面 ， 
那些 你 想 拥抱 的 技术 并 不 是 人 人 可 用 的 。 你 需要 与 人 竞争 ， 同 时 还 需要 保证 页 面 能 够 被 市 和 面 上 
90% 的 用 户 无 障碍 使 用 。 


不 管 怎 样 ， 你 都 需要 从 一 开始 就 在 脑 中 埋 下 可 访问 性 的 概念 。 我 能 理解 网 站 上 线 赢 取 用 户 对 
于 你 的 客户 来 说 有 多 么 重要 ,但 如 采 你 只 是 单纯 地 建站 ,， 想 着 可 访问 性 的 东西 可 以 日 后 再 加 ， 那 
么 你 日 后 可 能 就 会 有 个 大 “惊喜 ” 吹 。 一 旦 你 的 用 户 达 到 了 一 定 的 数量 级 ， 你 的 精力 就 会 集中 在 
添加 新 功能 和 解决 旧 辣 题 上 面 。 可 访问 性 就 像 “ 测 试 驱 动 开 发 "*: 如 过 你 没有 从 一 开始 就 采用 这 
种 方式 ， 那么 你 永远 也 不 可 能 采用 它 了 一 一 因为 到 最 后 你 会 变 得 讨厌 它 。 如 琳 你 不 能 以 “这 是 正 
确 的 事情 ”来 说 服 老 板 们 去 旁 虑 可 访问 性 ， 那 么 就 把 他 们 最 能 理解 的 事情 放 上 台面 一 一 钱 。 跟 他 
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们 讲 如 琳 不 考虑 可 访问 性 的 问题 ， 会 流失 多 少 目 标 市 场 ， 具 体 数字 会 超过 老板 们 的 想 沦 。 


如 琳 你 是 为 政府 、 大 学 或 者 公立 学 校 建 站 ， 那 你 还 需要 去 了 解 相关 法 规 ， 要 了 解 对 于 这 样 的 
客户 , 技术 方面 的 交易 应 该 怎样 进行 。 相关 法 案 规 定 , 有 些 政府 机 构 不 得 购买 不 符合 508 条 款 的 
技术 产品 。 如 琳 你 的 目标 市 场 包括 这 类 机 构 , 你 则 需要 保证 目 己 的 产品 是 符合 条 件 并 可 以 同人 他们 
出 售 的 。 








wy 小 乔 爱 问 ee 
过 ”如 果 可 访问 性 是 如 此 重要 ， 那 为 什么 我 们 到 现在 才 开 始 做 相关 的 实现 呢 


这 个 问题 不 错 。 之 所 以 现在 才 谈 论 到 这 个 话题 ,是 因为 我 有 太 多 的 内 容 需 要 写 了 。 另外 
一 个 原因 是 这 本 书 并 不 是 专门 讲 可 用 性 的 。 但是， 如 果 你 往 回 翻 翻 书 ,应 该 能 注意 到 我 一 直 
都 有 提 关 于 可 访问 性 的 概念 ， 包 括 上 默认 文字 、 验 证 、 语 义 化 的 标签 、 读 写 障碍 和 一 些 配 色 的 
问题 在 Foodbox 上 实现 可 访问 性 的 功能 会 相对 容易 一 些 , 因为 在 设计 的 时 候 就 已 经 考虑 到 
这 些 问 题 了 。 在 建造 下 一 个 网 页 的 时 候 , 你 应 该 从 最 初 的 开发 开始 ， 就 将 这 一 章 所 提 到 所 有 
知识 考虑 在 内 。 





去 http:/www.section508.gov/ 了 解 更 多 关于 这 方面 的 指南 ， 然 后 看 看 它 对 你 有 哪些 影响 。 按 
照 这 个 网 站 上 的 指南 ， 你 应 该 可 以 建造 可 访问 性 非 稼 好 的 网 站 。 实 际 上 我 个 人 认为 ， 关 于 残疾 用 
户 的 可 访问 性 ， 这 个 网 站 上 的 指导 要 比 W3C 的 指导 好 很 多 。 
16.5 ”改进 Foodbox 网 站 的 可 访问 性 


从 文字 浏览 如 中 看 Foodbox 会 发 现 这 样 一 个 问题 : Aye ee (EA ak bad i ae A A, 还 是 
无 法 加 载 样式 表 的 手机 用 户 , 都 需要 往 下 拉动 相当 一 部 分 页 面 才能 登录 ,或 是 阅读 页 面 中 的 内 容 。 
搜索 框 和 标签 云 横 在 用 户 和 内 容 之 间 。 


对 付 这 种 恼人 的 小 问题 ， 可 以 新 建 一 些 跳 转 链接 用 以 寻 航 ,并 将 这 些 链接 在 主 样式 表 和 打印 
样式 表 里 隐 荐 起 来 ， 这 样 一 来 屏幕 阅读 袁 会 识别 出 来 这 些 链接 ， 而 普通 用 户 无 法 看 到 它们 。 


16.5.1 添加 跳 转 链接 


开打 index.html, MEZZA Banner 图 像 的 地 方 加 上 下 面 的 粗 体 代码 。 





中 这 里 指 的 是 1998 年 美国 议会 通过 的 对 康复 法 案 第 508 市 做 出 的 修改 , 内容 包括 全 技术 产品 需要 让 残疾 人 可 以 正 
党 使用。 一 一 译 者 注 
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accessibility /index.html 


<div id="header"> <!-- start of header --> 
<img src=""images/banner.png" alt="Foodbox"> 
> <ul id="skiplinks" class= noprint > 


> <li><a href="#main_text" accesskey="0">Skip to Content</a> 
> </ul> 
</div> <!-- end of header --> 





Skipe to Content 链接 指 癌 页 面 的 主 文字 区 域 。 之 前 给 所 有 的 区 域 都 加 上 了 id， 这 对 捉 供 具 
有 可 访问 性 的 导航 古 非 第 有 利 的 。 





accesskey 属 性 

在 上 面 提 到 的 链接 中 ， 你 可 能 会 注意 到 一 个 新 的 属性 一 一 accesskey 属性 。 

这 个 属性 可 以 让 你 的 用 户 使 用 快捷 键 激活 链接 、 按 钮 和 表单 域 。 这 对 使 用 屏幕 阅读 右 的 用 户 
是 个 很 大 的 便利 ， 同 时 对 那些 不 能 或 者 不 愿意 用 鼠标 的 用 户 也 是 一 个 很 方便 的 功能 。 当 然 你 需要 
以 基 种 方式 告知 用 户 这 些 快 捷 键 的 存在 ， 因 为 他 们 不 可 能 去 看 你 的 产 代 码 来 知晓 快捷 键 。 

DAZ T, RERE 0 (PARED Scie, Zs ak PE, ZEA AFR 
Twitter 的 开发 者 有 一 样 的 认识 一 一 这 个 快捷 键 对 手机 用 户 非常 有 用 。 瞧 ,， 可 访问 性 并 不 只 是 关于 
残疾 人 用 户 的 吧 ，。 


16.5.2 ”屏幕 阅读 器 和 display :none 


在 第 14 FE, 你 学 会 了 如 何在 相应 的 CSS 中 使 用 display:none 来 隐 泸 某 些 区 域 或 是 元 素 。 
有 些 屏 幕 阅读 器 已 经 开始 对 这 个 规则 区 别 对待 了 。 很 多 关于 可 访问 性 的 文章 都 主张 使 用 
display:none 来 隐藏 跳 转 链接 ， 但 是 这 种 方法 似乎 已 经 行 不 通 了。 其 实 可 以 用 另外 一 个 技巧 来 
将 这 个 链接 放 在 页 面 之 外 。 





快捷 键 是 如 何 工作 的 


浏览 器 如 何 响 应 你 按 下 的 快捷 键 是 由 这 个 快捷 键 制定 的 元 素 决 定 的 , 如 果 你 为 一 个 链接 
设 定 了 一 个 快捷 键 ， 那 么 当 用 户 按 下 这 个 快捷 键 的 时 候 链接 会 被 激活 。“” 当 你 将 快捷 键 指向 
一 个 表单 域 的 标签 的 时 候 ， 用 户 的 和 鼠标 指针 会 指向 并 激活 那个 表单 域 。 


快捷 键 基 本 上 可 以 取代 单 击 和 鼠标 的 作用 ， 而 且 它 还 可 以 为 用 户 的 工作 流 加 速 。 





© EEH, URREA, HARA. 
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16.5.3 用 “ 负 位 置 ”隐藏 跳 转 链接 


Rie AH CSS 只 知 要 儿 行 束 能 写 好 。 这 里 首先 要 用 到 绝对 定位 ， 这 样 束 可 以 在 CSS 里 面 
使 用 元 素 的 XX 坐标 和 YY 坐标。 在 激活 绝对 定位 后 ， 可 以 把 元 素 的 坐标 设 为 -9999 像素 ,这 意味 着 
该 元 素 会 被 放置 在 浏览 器 距 左 侧 边缘 的 左边 9999 的 像素 处 。 


将 以 下 的 CSS 规则 添加 到 stylesheets/layout.css 文件 中 : 
accessibility /stylesheets/layout.css 


#skiplinks{ 
position:absolute; 
left:-9999px; 

} 


给 需要 跳 转 的 链接 加 上 Class="noprint" RE, XFER A akeat] FERK. 
16.5.4 ”表单 的 标签 


利用 页 面 的 快捷 键 导 航 ， 可 以 进一步 帮助 移动 用 户 、 家 人 用 户 和 有 运动 障碍 的 用 户 。 为 了 达 
到 这 个 目的 ， 只 需 对 表单 做 一 些微 调 ， 给 它 加 上 一 些 标签 。Label 域 可 以 将 文字 标 答 和 表单 域 绑 
定 ， 这 样 屏 项 阅读 絮 就 可 以 将 表单 域 中 的 值 和 名 字 对 应 起 来 了 。 











标签 的 力量 


标签 可 以 提高 页 面 对 所 有 用 户 的 可 访问 性 。 比方 说 ， 如 果 你 给 一 个 单 选 按钮 或 是 一 个 多 
选 框 加 上 了 标签 ,那么 用 户 就 能 通过 选择 文字 标签 来 选择 这 个 多 选 框 或 者 是 单 击 那个 按钮 。 
这 个 万 法 为 那些 不 能 准确 使 用 鼠标 的 用 己 提 供 了 方便 。 

我 们 可 以 通过 指向 一 个 元 素 的 ID 来 为 它 指定 标签 ， 就 像 这 样 : 

<input type="checkbox" value="yes" id="user_active" 
name="user[active]" /> 


<label for="user_active">Activate User</label> 


想 想 标签 功能 的 强大 吧 ， 它 们 可 以 让 用 户 更 轻松 地 跟 表 单 互动 。 





标签 可 以 将 文字 标签 同 表单 域 结合 起 来 ， 同 时 你 还 可 以 为 元 素 制 定 快 捷 键 。 如 琳 你 在 表单 
中 将 一 个 标签 指 同 了 搜索 框 ， 那 么 当 快 捷 键 被 按 下 的 时 候 ， 忌 标 指针 就 会 被 放 苞 在 搜索 框 的 里 
H: 








D 如 果 你 将 一 个 容器 元 素 的 位 置 设置 为 相对 〈poistion: relative)， 那 么 这 个 容器 中 的 绝对 定位 的 元 素 的 原点 就 
是 该 容 右 的 左上 角 。 
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accessibility /index.html 


<form id="search_form" method="get" action="/recipes/"> 
<div> 
> <label for="search_keywords" accesskey="s">Keywords</label> 
<input type="text" id="search_keywords" name="keywords"> 


<input type="image" alt="Search" src="images/search.png'"> 
</div> 


在 这 里 用 S 作为 快捷 键 , 但 是 实际 的 使 用 组 合 可 能 不 同 , 具体 视 用 户 的 浏览 融和 操作 系统 
Æo Mac 的 Safari 和 Firefox 需要 你 同时 按 下 Ctrl+S$， 而 在 Windows 里 ， 这 一 aiid 
Save， 所 以 你 要 在 Firefox 里 用 Shift+Alt+tS， 在 下 里 用 Alt+s。 


搜索 表单 的 label 标签 市 来 了 一 些 额 外 的 文字 , 我 们 并 不 需要 这 些 文字 。 所 以 我 们 会 用 CSS 
来 隐 纪 它 ， 豆 像 刚 刚 对 寻 航 跳 扶 链接 做 的 事情 一 样 : 


accessibility /stylesheets/layout.css 





#search_form label{ 
position:absolute; 
left:-9999px;} 


如 果 想 要 它 变 得 更 好 ， 你 可 以 尝试 着 将 几 条 CSS 规则 并 成 一 条 。 

到 目前 为 止 ， ee ee ee 你 可 能 还 需要 在 
导航 条 上 添加 一 些 跳 转 链接 ， 进 一 步 提高 网 页 的 可 访问 性 。 实 际 上 ， 你 肯定 要 为 移动 用 户 添加 这 
些 功 能 的 。 

W 小 天 爱问 

J 等 等 ， 如 果 每 个 浏览 器 都 有 不 同 的 键盘 快捷 键 ， 那 么 用 户 是 如 何 判断 该 用 什么 呢 

屏幕 阅读 器 (如 JAWS) 会 在 遇 到 快捷 键 的 时 候 向 用 户 读 出 快捷 键 ， 这 对 使 用 屏幕 阅读 
器 的 用 户 来 说 相当 有 用 。 然 而 你 的 快捷 键 并 不 会 自动 出 现在 大 多 数 浏览 器 中 。 

你 可 能 需要 在 页 面 上 放 一 个 “可 用 性 声明 ”， 然 后 通过 跳 转 链接 导航 ， 通 过 这 个 链接 链 
到 可 访问 性 声明 和 快捷 键 列表 , 同时 还 可 以 在 这 个 页 面 上 加 上 其 他 对 残疾 人 用 户 导 航 有 用 的 
信息 。 同 时 这 个 页 面 上 还 需要 有 一 个 表单 ， 它 可 以 收集 用 户 的 反馈 ,从 而 让 你 对 这 些 东 西 的 
使 用 情况 有 个 大 概 了 解 。 


16.6 ”使 用 制 表 键 
现在 Foodbox 网 站 还 没有 特别 复杂 的 表单 ,这 只 是 时 间 问 题 。 你 总 是 会 需要 创建 一 个 复杂 表 
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单 的 。 当 你 面临 这 种 任务 的 时 候 ， 要 想 想 用 户 可 能 使 用 什么 样 的 快捷 键 来 浏览 表单 。 当 用 户 按 下 
制 表 键 的 时 候 ， 鼠标 指针 会 从 一 个 元 素 跳 到 男 外 一 个 元 素 。 但 是 如 末 表 单 没有 经 过 精心 设计 ,， ba 
标 指针 可 能 在 页 面 上 乱 走 。 可 以 使 用 tabindex 属性 进一步 控制 表单 域 。 


tabindex 属性 可 以 让 你 在 界面 上 控制 标签 的 顺序 ， 只 需 将 表单 里 的 每 个 区 域 的 tabindex 属 
性 依次 递增 就 可 以 了 。 你 可 以 为 任何 可 交互 元 素 设 置 tabindex， 像 链接 、 下 拉 列 表 、 文 字 输 入 
框 、 多 选 框 和 单 选 框 等 都 可 以 。 


接 下 来 ， 将 Foodbox 注册 用 的 表单 变 成 一 个 具有 可 访问 性 的 表单 : 
<form id="signup" action="/signup" method="get"'> 
<p> 
<label for="account_login">Login</label><br> 
<input i1d="account_login" 
name="account[login]" 
size="30" type="text” tabindex="1"> 





</p> 


<p> 
<label for="ema71">Email</label><br> 
<input 1d="account_ema1!” 
name="account[email]" 
size="30" type="text” tabindex="2"></p> 


<p> 
<label for="password">Password</label><br> 
<input id="account_password" 
name="account[password]" 
size="30" type="password" tabindex="3"> 
</p> 


<p> 
<label for="password_confirmation"> 
Confirm Password 
</label><br> 
<input id="account_password_confirmation"” 
name= "account [password_confirmation]" 
s1ze="30" type="password" tabindex="4"> 
</p> 


<p> 
<label 
<input class="button" name="commi t" 
type="submit" value="Sign up" 
tabindex="5"> 
</label> 
or <a href="/" tabindex="6">Cancel</a> 
</p> 


</form> 
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PET ( 和 其 他 的 特殊 字符 ) 


如 果 你 在 页 面 上 用 到 了 通道 符号 ”( 在 首页 的 页 脚 中 就 用 了 ), 那么 就 可 能 会 对 屏幕 阅读 
器 处 理 这 种 字符 的 方式 感到 惊讶 。Foodbox 的 页 脚 在 一 个 屏幕 阅读 器 眼中 是 这 样 的 : 
“Copyright copyright two thousand eight Foodbox, LLC, all rights reserved. Link Terms of 


Service vertical bar Link Privacy Policy.” 


它 将 版 权 符 号 读 成 了 一 个 词 ， 所 以 “copyright ”这 个 词 被 读 了 两 遍 。 另 外 坚 直 符 也 被 识 
别 出 来 了 。 

这 对 一 个 小 网 站 没什么 , 但 是 请 想 想 ， 如 果 页 脚 里 有 6 个 被 坚 直 符 分 开 的 信息 ,阅读 器 
会 读 成 什么 样子 。 所 以 当 你 开发 网 站 的 时 候 要 对 这 些 特殊 字符 特别 小 心 , 尤其 是 那些 跟 内 容 
没有 直接 联系 的 字符 。 你 能 想到 一 个 更 好 地 处 理 页 脚 的 方法 吗 ? 
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你 可 能 觉得 这 种 说 法 会 引起 口水 战 。 不 要 担心 ， 这 种 事情 很 平常 。 制 定 tabindex 是 一 件 令 
ARASH, 特别 是 在 一 个 复杂 且 有 众多 域 的 表单 里 ， 回 表单 中 部 添加 内 容 的 时 候 ，tabindex 
审 来 的 及 烦 尤其 。 如 采 你 在 设计 表单 的 时 候 用 心 ， 乞 全 可 以 避免 使 用 tabindex。 如 霖 允许 表单 
自 上 而 下 ，tabindex 自然 没有 问题 ， 你 完全 不 必 操 这 份 心 。 但 是 还 要 记 住 ， 在 多 个 平台 下 的 多 
RRA ee HA BE MT R., 


16.7 可 访问 性 清 
在 发 布 网 站 之 前 ， 你 需要 做 一 个 所 有 页 面 的 快速 验证 工作 。 验 证 工作 应 该 包括 以 下 几 条 。 


O 确定 所 有 页 面 的 标签 都 是 合法 的 。 

O 确认 所 有 的 样式 表 都 是 合法 的 。 

DO 看 看 是 不 是 所 有 的 图 片 标签 都 加 上 了 有 用 的 、 描 述 性 的 默认 文字 。 
D 在 基于 文本 的 浏览 器 (比如 ，Lynx) 中 检查 所 有 页 面 是 否 显示 正常 。 
O 检查 页 面 在 老式 浏览 器 中 是 否 显示 正常 。 

O 关闭 JavaScript， 看 看 页 面 征 人 否 可 用 。 

O 在 较 慢 的 网 速 下 看 看 网 页 需要 多 长 时 间 才 能 加 载 。 

















O 即 中 。 一 一 译 者 注 
@ 使 用 Tab 键 切换 焦点 时 的 顺序 。 
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O 关 挥 图 片 显 示 功 能 ， 确 保 没 有 哪个 文字 是 仅仅 以 图 片 的 形式 存在 的 。 

O 在 Firefox 上 安装 Fangs 这 个 扩展 ， 看 看 屏幕 阅读 器 是 如 何 解 析 页 面 的 。 

D 想 办 法 弄 到 JAWS" 或 者 Window-Eyes” 的 试用 版 ,将 显示 器 关 掉 ,然后 尝试 浏览 你 的 网 页 。 

O 找 第 三 方 检查 页 面 内 容 的 拼写 、 语 法 和 其 他 相关 问题 。 

O 找到 所 有 的 “ 单 击 这 里 ”的 文字 ， 因 为 并 不 是 所 有 的 用 户 都 有 鼠标 。 另 外 ， 现 在 的 用 户 
已 经 知道 面 对 超 链接 的 时 候 该 怎么 做 了 。 所 以 如 朱 你 的 链接 还 不 够 明显 , 那么 请 检查 你 实 
现 链接 的 方式 。 

Q 用 Colorblind Web Page Filter 一 类 的 软件 来 测试 页 面 在 不 同色 育 症 患者 眼中 的 样子 。 另 外 
Color Oracle 也 是 一 款 类 似 的 优秀 的 跨 平台 软件 。 

O 确保 页 面 上 没有 快速 内 动 的 元 素 ， 这 可 能 引起 疾病 用 户 的 不 适 。 

O 确保 添加 了 跳 转 导航 ， 以 帮助 使 用 屏幕 阅读 絮 的 用 户 可 以 跳 过 重复 的 导航 。 

O 确保 用 户 可 以 在 表单 域 间 轻 松 地 切换 。 

O 确保 所 有 的 视频 都 有 说 明文 字 或 者 字幕 ， 以 帮助 听力 障碍 用 户 正 常 使 用 。 
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可 访问 性 和 可 用 性 十 分 重要 ,是 不 能 忽视 的 。 即 便 不 面 对 残 疾 人 用 户 , 这 些 可 以 帮 残 疾 人 用 
户 正常 访问 网 站 的 技术 也 能 帮助 你 让 网 站 对 更 多 其 他 用 户 可 用 。 一 定 要 记 住 ， 可 访问 性 并 不 是 只 
针对 盲人 用 户 的 。 实 际 上 ， 可 访问 性 指 的 是 能 让 任何 设备 上 的 任何 用 户 使 用 网 站 。 无 论处 于 开发 
的 哪个 阶段 ， 你 都 应 该 将 这 条 定义 当 作 必 须 实现 的 目标 。 


D http://www.freedomscientific.com/, 
© http://www.gwmicro.com/, 

© http://colorfilter.wickline.org/, 

© http://colororacle.cartography.ch/ 。 


Ee 
制作 收藏 夹 图 标 





大 多 数 浏 览 器 都 会 在 网 页 的 地 址 栏 旁 边 显示 一 个 小 图 标 , 这 个 图 片 还 会 显示 在 收藏 夹 网 址 的 
书签 旁边 。 我 们 把 这 个 图 标 叫做 收藏 夹 图 标 (favicon)。 在 支持 多 标签 的 浏览 絮 中 ， 收 藏 夹 图标 
会 出 现在 页 面 标 签 上 。 这 种 统一 样式 的 曝光 能 加 强 网 站 的 品牌 建设 。 大 多 数 受 欢迎 的 网 站 都 有 收 
藏 夹 图 标 ， 我 们 的 Foodbox 也 不 例外 。 


17.1 创建 简单 的 图 标 


一 个 成 功 的 收藏 夹 图 标 应 该 可 以 反映 我 们 的 品牌 。 我 们 可 以 使 用 Foodbox 的 Logo 中 的 四 个 
方形 。 打 开 Photoshop， 新 建 一 个 文档 ， 文 档 大 小 为 64 像素 宽 ，64 像素 高 ， 分 辩 率 是 72dpi， 色 
彩 空间 则 设 为 RGB。 背景 颜色 是 白色 。 
单 击 File 采 单 里 的 Place 选项 ， 将 foodbox.ai 文件 寻 入 。 然 后 用 缩放 手柄 调整 图 片 大 小 ,， 直 
到 四 个 方形 刚刚 好 是 画布 的 大 小 (参见 图 17-1), 在 调整 大 小 的 时 候 记 人 时 按 住 Shift PER WK, 不 然 
可 能 会 导致 Logo 的 比例 变形 。 








17-1 调整 Foodbox 的 Logo 大 小 ， 让 四 个 方形 都 在 画布 内 部 


17.2 创建 收藏 夹 图 标 


网 页 收藏 夹 是 一 个 16 像素 x 16 像素 的 windows.ico 文件 ，Photoshop 并 没有 内 建 可 以 导出 这 
个 格式 文件 的 着 错 。 但 十 你 可 以 从 Telegraphics 弄 到 一 个 免费 的 滤 锐 ,并且 这 个 滤 镜 支持 几乎 所 
有 版 本 的 Photoshop, 另外 还 有 一 个 命令 行 工具 叫做 png2ico ， 该 工具 可 以 将 PNG 文件 转换 成 


© http://www.telegraphics.com.au/sw/ , 


© http://www.winterdrache.de/freeware/png2ico/index.html , 
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ICO 文件 。Windows 用 户 可 以 下 载 它 的 二 进 制 安装 文件 ，Linux 和 Mac 用 户 则 需要 看 看 它们 各 自 
的 包 管 理 妖 是 如 何 安 装 这 个 软件 的 。 


在 Photoshop 中 用 Image Size (图 像 大 小 ) 命令 将 图 形 改 成 16 像素 x 16 像素 大 小 ， 该 命令 在 
Image (图 像 ) XET. WAE Bicubic Sharper[ 二 次 立方 〈 较 锐利 ) ] 选 项 ， 这 个 选项 让 图 片 在 
缩小 的 时 候 你 持 请 晰 。 


将 文件 保存 为 favicon.png， 因 为 收藏 夹 图 标 文 持 透 明 图 片 ， 所 以 保存 成 PNG 格式 是 没有 问 


打开 终端 或 者 是 命令 行 提示 符 ， 进 入 包含 这 个 文件 的 文件 夹 ， 键 入 以 下 命令 : 

png2ico favicon.ico favicon.png 
然后 将 favicon.ico 文件 保存 在 网 站 的 根 目录 下 (注意 ， 不 是 images 文件 夹 ) ， 这 样 一 来 大 多 数 说 
贤 如 都 能 日 己 找到 这 个 文件 。 在 本 地 系统 里 你 是 看 不 到 这 个 收藏 夹 图 标的 ， 所 以 必须 将 网 站 传 到 
服务 如 上 ， 田 外 可 能 还 要 重启 服务 各 ， 才 能 让 它 显示 在 地 址 栏 旁 。 在 图 17-2 中 ， 你 可 以 看 到 最 
ATAR. 





(EE nttp:/ /www.yourfoodbox.com/ 
图 17-2 我们 的 收藏 夹 图 标 
Safari, Firefox 和 IE 7 都 支持 收藏 夹 图 标 ， 只 是 在 IE6 上 你 可 能 需要 一 些 人 额外 的 功夫 才能 让 
它 正常 显示 。 


如 琳 图 标 不 能 正常 显示 ， 请 将 以 下 的 代码 加 入 首页 的 head 区 域 中 : 


<link rel="shortcut icon" href="favicon.ico"> 
<link rel="icon" type="image/ico" href="favicon. ico'> 
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收藏 夹 图 标 是 网 站 品牌 的 一 个 重要 部 分 ， 它 能 够 让 用 户 牢 记 住 你 的 品牌 ,因为 在 他 们 访问 网 
站 时 能 看 到 这 个 图 标 。 即 便 征 他 们 在 访问 其 他 页 面 的 时 候 ， 也 总 十 能 够 收藏 栏 中 的 图 标 。 选 用 网 
站 的 Logo 等 有 代表 性 的 图 片 作 为 收藏 夹 图 标 ， 一 定 会 事半功倍 。 








第 76 章 
搜索 引擎 优化 


Foodbox 网 站 已 经 束 位 了 ， 所 有 人 都 完 得 它 看 起 来 不 错 。 没 有 什么 能 比 全 力 完 成 一 个 项 目 
更 能 让 你 高 兴 了 。 但 是 ， 建 起 网 站 只 是 一 个 开始 ， 如 有 果 网 站 没有 人 来 看 ， 那 么 它 会 变 得 富 无 意 
义 。 因 此 我 们 需要 在 这 里 谈 谈 如 何 能 让 网 站 更 容易 被 搜索 引擎 找到 ， 同 时 又 不 损害 它 的 用 户 友 
If RE 
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关于 这 个 概念 我 已 经 说 过 多 次 了 , 但 是 我 仍然 要 再 踢 调 一 过 : 无 论 网 站 多 么 深 腕 ， 如 琳 没 有 
好 内 容 ， 它 对 用 户 不 会 有 多 少 吸引 力 。[ Flickr 为 例 ， 这 个 网 站 有 着 保守 且 平 痰 无 奇 的 界面 , 设 
计 最 人 简化， 用 尽 可 能 少 的 颜色 ， 因 为 开发 人 员 知 道 用 户 到 这 个 网 站 来 是 为 了 看 相片 的 ， 相片 就 是 
Flickr 的 内 容 。 


在 搜索 引擎 看 来 ， 内 容 也 是 最 重要 的 。 引 擎 希望 网 站 的 内 容 跟 网 站 的 关键 字 是 相 匹配 的 。 
18.1.1 “欺骗 ”搜索 引擎 


首先 我 要 发 表 一 个 免责 声明 : 如 果 你 在 看 这 市 的 时 候 认 为 这 些 技巧 可 以 帮 你 提高 网 页 排名 ， 
那 你 就 大 错 特 错 了 。 搜 索引 擎 其 实 对 这 些小 把 戏 心 知 肚 明 。 我 在 这 里 列 出 这 些小 把 戏 ， 目的 是 让 
你 能 够 认 请 它们 的 面目 并 远离 它们 。 这 其 中 有 些 东 西 可 能 是 你 无 意识 加 上 去 的 , 而 男 外 一 些 则 可 
能 是 那些 无 良 的 SEO 公司 的 把 戏 ， 或 者 为 了 满足 客户 要 求 而 不 得 不 做 的 事情 。 这 些 技巧 有 时 候 
会 在 短期 内 起 一 些 作用 ,但 长 远 来 看 ， 它 们 一 定 会 对 你 的 网 页 造成 严重 伤害 。 

1. 关键 字 重 载 


所 谓 关键 字 重 载 , 基本 上 指 的 是 往 你 的 页 面 上 塞 人 无 穷尽 的 关键 字 。 有 些 人 这 样 做 是 因为 他 
对 目 己 输入 的 关键 字 并 没有 概念 , 还 有 些 人 输入 大 量 重复 的 关键 字 是 想 引 起 搜索 引擎 的 注意 。 大 
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体 上 说 ,每 个 关键 字 不 应 该 被 重复 两 次 以 上 , 并 且 每 一 页 的 关键 字 应 该 保持 在 30~45 个 的 范围 。 
2. 不 相关 的 关键 字 


如 东 你 用 了 那些 跟 页 面 内 容 蕊 不 相关 的 关键 字 ,， 那 就 有 大 麻烦 了。 有些 网 站 专门 用 报纸 头条 
标题 里 的 词组 ， 或 是 用 Google 搜索 排行 里 头 几 名 的 词 做 关键 字 ， 他 们 先 得 这 样 做 可 以 让 更 多 的 
用 户 访 问 他 们 的 网 页 。 


适合 Foodbox 的 关键 字 有 : 鸡肉 、 火 鸡 、 菜 谱 、 晚 饭 和 意大利 面 。 不 太 搭 边 的 关键 字 则 类 似 
免费 MP3、 视 频 、 免 费 iPod 或 者 是 帕 丽 斯 * 希尔顿”。 

别 笑 , 这 种 事情 经 党 发 生 。 特别 是 很 多 老板 会 要 求 程序 员 这 样 做 一 一 当 发 生 这 种 事情 的 时 候 ， 
你 需要 想 清楚 ,这 到 底 是 不 是 你 愿意 做 的 事 。 我 是 不 会 愿意 的 ,因为 我 不 想 在 上 线 几 个 月 后 Google 
FEL DA SLA AB BLA tee St Bl) AEE 

3. ABBR 

这 个 技巧 通常 依赖 于 服务 端的 技术 一 一 当 探 查 到 搜索 引擎 访问 的 时 候 , 服务 端 会 提供 一 套 另 
外 的 内 容 ， 跟 用 户 访 问 时 看 到 的 东西 完全 不 同 。 通 和 浓 ， 搜 索引 擎 会 用 仆 虫 程序 抓 取 页 面 的 内 容 ， 
用 关键 字 、 内 容 和 链接 建立 索引 ， 然 后 存 到 自己 的 数据 库 。 用 另 一 套 内 容 来 糊弄 它们 是 一 种 不 诚 
实 的 做 法 ,而 最 终 搜索 引擎 会 通过 用 户 的 投诉 知晓 这 类 不 诚实 的 举动 。 毕 竞 搜索 引擎 也 是 一 项 商 
业 服 务 ， 它 们 看 重 的 是 搜索 结果 要 跟 搜索 条 件 有 一 定 的 相关 性 。 

4. AB Baie 

这 是 一 种 老 旧 的 手段 , 但 是 它 的 受 欢迎 程度 还 是 让 我 感到 惊讶 ， 而 且 新 手 特别 喜欢 使 用 这 种 
方式 。 此 方法 会 将 大 量 的 短语 和 关键 字 放 在 内 容 页 里 ， 然 后 用 某 种 技巧 将 它们 隐藏 起 来 。 以 前 人 
们 把 这 批文 字 设 置 成 跟 背 景 同一 颜色 ， 后 来 搜索 引擎 能 够 识别 这 个 把 戏 了 ， 他 们 又 用 CSS 将 内 
容 放 到 页 面 之 外 ( 即 “ 负 位 置 ”方法 ) 或 是 其 他 方式 来 隐藏 这 些 内 容 。 

18.1.2 ”到底 什 么 是 内 容 

内 容 指 的 是 用 户 来 到 页 面 时 想 看 到 的 东西 。 文 字 显 然 是 内 容 的 一 种 ， 男 外 还 有 图 片 、 视 频 、 
音乐 和 可 下 载 文件 。 通常 来 讲 浏 览 器 对 这 些 东 西 都 感 兴 趣 ， 所 以 你 要 做 的 就 是 帮助 浏览 器 去 找到 
这 些 内 容 。 

你 已 经 学 会 了 用 alt 标签 给 图 片 加 上 默认 文字 , 而 你 可 能 不 知道 的 是 , 搜索 引擎 因为 无 法 分 
析 图 片 ， 所 以 它们 也 会 依赖 描述 图 像 的 默认 文字 ， 就 跟 屏 希 阅 读 如 一 个 样 。 所 以 要 保证 默认 文字 



































O 美国 著名 模特 、 歌 手 、 演 员 。 一 一 编者 注 
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跟 图 斤 和 内 容 一 致 ， 且 具有 描述 性 。 


18.2 ”选择 关键 字 


党 无 疑问 ，Foodbox 需要 一 些 关 键 字 ， 但 是 想 要 大 请 楚 用 户 到 底 通 过 什么 找到 这 个 网 站 ， 就 
比较 困难 了 。 这 市 里 我 会 提供 一 些 方 法 让 你 和 你 的 团队 建立 一 个 关键 字 列 表 。 


18.2.1 猜想 他 们 是 如 何 找到 你 的 


你 认为 用 户 搜索 你 的 网 站 的 时 候 ， 会 用 哪些 词 ? 记 下 来 。 比 如 说 当 我 想到 这 类 网 站 的 时 候 ， 
我 认为 用 户 会 搜索 食物 、 烘 烧 、 下 厨 、 菜 谱 、 简 单 的 晚餐 、 和 零食 、 甜 点 和 做 菜 指 导 。 


18.2.2 ”决定 你 想 如 何 被 发 现 


再 写 下 你 沉 得 网 站 应 该 出 现在 那些 词 的 搜索 结 末 中 。 上 一 六 提 到 的 儿 个 还 不 错 , 但 是 你 总 能 
想 出 更 多 来 。 一 个 本 地 客户 可 能 会 希望 你 加 上 城市 、 州 (省 ) 名 或 者 区 域名 ， 这样 网 页 用 户 可 以 
ERR KW, 北京 ”的 时 候 找 到 你 的 网 站 。 








by 小 乔 爱问 ……. 
~ Flash 怎么 办 


Google 和 Adobe 公司 达成 过 合作 协议 ， 这 使 得 对 Flash 影片 的 索引 成 为 可 能 。 但 是 索 

引 效 果 的 好 坏 取 决 于 Flash 影片 的 作者 是 如 何 创建 Flash 影片 的 。 比 如 ,如果 Flash 里 含有 文 

字 和 链接 ,， 那 Google 有 可 能 会 看 到 它们 。 另 外 ，Flash 也 是 被 包含 在 HTML 页 面 里 的 ， 所 以 
你 可 以 用 meta 标签 来 为 它 加 上 关键 字 和 简短 的 描述 。 

在 将 来 ， 可 能 会 有 更 多 的 搜索 引 营 具备 搜索 Flash 的 能 力 一 一 毕 竞 它 在 可 访问 性 方面 也 

已 经 作 了 很 多 努力 。 时 代 总 是 在 不 断 变化 ， 作 为 开发 者 ， 你 需要 与 时 俱 进 。 


18.23 ”看 看 竞争 对 手 


看 看 你 的 商业 伙伴 和 苋 争 对 手 , 他 们 都 用 了 什么 样 的 关键 字 。 查 看 他 们 页 面 的 源码 就 跟 查 看 
自己 的 一 样 简 单 ， 所 以 还 是 去 看 看 他 们 的 用 法 吧 。 但 是 千 万 不 要 照抄 他 们 的 东西 ， 也 不 要 将 他 们 
用 过 的 短语 重组 使 用 。 曾 经 磁 到 一 个 客户 , 硬 要 我 把 苋 争 对 手 的 名 字 加 到 自己 的 关键 字 里 去 , 这 





®© http://searchengineland.com/google-now-crawling-and-indexing-flash-content- 14299. 


18.3 完善 页 面 内 容 如 207 


样 做 古 不 道德 的 , 随 着 你 做 的 网 络 开 发 越 来 越 多 ,特别 是 你 对 设计 和 内 容 两 个 方面 得 心 应 手 之 后 ， 
你 跟 客户 打交道 的 能 力也 会 越 来 越 剖 ， 也 就 会 更 完美 地 处 理 这 种 奇怪 其 至 是 危险 的 要 求 了 。 


18.2.4 ”添加 关键 字 


将 index.html 文件 打开 ， 在 head 区 域内 加 上 meta 标签 : 


<meta name="keywords" content="foodbox, recipes, cookbook, desserts, 
entrees, dinner, share, browse, ingredients, mexican, italian, community"> 


name 属性 决定 了 meta 标签 的 类 型 ， 而 content 属性 则 指定 了 内 容 和 值 。 输 入 关键 字 的 时 候 要 用 
过 号 把 词语 或 者 短语 隔 开 。 


Ww Ip 
T ”关键 字 有 那么 重要 吗 ? 我 的 一 些 对 手 一 个 关键 字 都 没有 , 可 他 们 的 页 面 却 表 现 得 很 好 


如 果 使 用 正确 ， 关 键 字 还 是 很 有 用 的 。 你 需要 做 的 是 保持 关键 字 和 页 面 内 容 的 一 致 性 。 
很 多 搜索 引 营 会 因为 关键 字 同 内 容 不 符 而 大 大 降低 一 个 页 面 的 权重 ， 因 为 这 是 一 种 坎 骗 行为 。 


你 对 手 的 网 页 没有 关键 字 ， 却 在 搜索 结果 里 排名 很 高 ， 这 里 面 的 具体 原因 可 以 有 很 多 ， 
CodingHorror 这 个 网 站 一 个 关键 字 都 没有 ， 但 是 它 会 保持 内 容 的 更 新 ， 而 且 还 有 很 多 回 链 。 
对 页 面 的 链接 所 带 来 的 权重 在 搜索 引 芝 的 等 级 系统 里 要 大 大 超过 内 容 。 

但 你 并 不 是 CodingHorror， 无 法 依靠 大 量 的 流量 和 回 链 。 因 此 ， 如 果 布 望 优化 页 面 ， 那 
么 不 要 在 关键 字 上 犯错 误 。 只 要 它们 跟 内 容 是 相符 的 ， 网 站 的 等 级 就 不 会 受到 危害 。 


18.3 ”完善 页 面 内 容 


现在 关键 字 选 好 了 ,你 要 做 的 征调 整 页 面 内 容 ， 要 关键 字 零 星 地 出 现在 页 面 中 。 如 采 你 有 一 
个 不 错 的 网 站 编辑 , 那 现在 正 征 他 大 展 产 脚 的 时 机 ; 但 大 多 数 情 况 下 , 古 你 必须 目 己 做 这 件 事情 。 
FE DUA REIL TAS, ATER BES UES. TERK Za, SALA PEIRA 


O MERRIE. XA ARRERA ER, RIA SY 1B 1 HOR AY Da Vz 


有 语 境 的 。 
D 大 声 姑 读 文字 。 如 来 你 没有 发 笑 ， 就 说 明文 草 还 不 错 。 你 还 应 该 在 几 个 朋友 和 面前 谍 一 读 ， 
收集 反馈 。 


D http://www.codinghorror.com/ , 
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为 了 巩固 网 页 在 搜索 引擎 中 的 地 位 , 不 仅 要 保持 内 容 的 一 致 性 , 还 要 保证 关键 字 和 页 面 元 素 
的 一 致 性 。 


每 个 页 面 都 应 该 有 一 个 自己 的 title 标签 一 标签 内 容 由 该 页 面 的 标题 和 网 站 名 字 组 成 这 
样 一 来 ， 网 页 最 重要 的 信息 (标题) 就 会 出 现在 搜索 引擎 的 搜索 结果 里 面 。 几 乎 所 有 的 搜索 引擎 
都 会 在 搜索 结果 中 显示 页 面 标题 。 


另外 ， 每 个 页 面 至 少 都 应 该 有 一 个 hl 标签 ， 标 签 里 应 该 是 页 面 标题 。 这 种 一 致 性 将 有 助 于 
搜索 引擎 来 判断 页 面 内 容 的 强度 。 


了 最后, 要 从 标题 里 抽取 一 些 关 键 字 。 从 页 面 的 链接 或 者 是 从 段落 里 取 一 些 关 键 字 也 是 可 以 的 。 
18.4 不 要 因为 优化 而 忽略 了 用 户 


这 些 内 容 上 的 调整 可 能 会 引 来 令 人 不 快 的 后 来 一 一 流失 用 户 。 要 记 住 ， 内 容 是 最 重要 的 ， 所 
以 不 要 因为 一 点 上 扣 关 键 字 就 辆 牲 好 内 容 。 内 容 首 先是 写 给 用 户 看 的 ， 其 次 才 是 给 候 虫 看 的 。 








18.5 ”你 和 链接 


页 面 上 链接 数量 的 不 同 会 给 搜索 引擎 排名 市 来 的 印象 不 同 , 有 好 有 坏 。 如 琳 页 面 上 有 太 多 指 
问 外 部 站 点 的 链接 ， 搜 索 ?| 擎 可 能 会 认为 页 面 上 的 内 容 和 没有 关联 性 ， 从 而 降低 对 页 面 的 评分 。 


另外 ,也 要 注意 其 他 人 是 用 什么 方式 链接 到 你 的 页 面 的 。 通 常情 况 下 , 你 是 会 期 待 别人 外 链 
到 你 的 网 站 上 的 , 这 样 一 来 搜索 引擎 会 认为 由 于 你 的 页 面 上 内 容 关 联 性 很 好 ， 所 以 别 的 网 站 才 会 
给 你 输送 流量 。 有 些 网 站 ， 像 link farms, link exchanges 之 类 的 ，Google 会 认为 它们 是 不 太 好 的 
令 居 一 一 如 果 在 这 些 网 站 上 有 你 网 站 的 链接 ,搜索 引擎 也 会 降低 页 面 的 评分 ， 因 为 你 可 能 会 被 认 
为 是 垃圾 信息 发 运 商 。 

当然 你 无 法 控制 别人 如 何 链接 到 你 的 网 站 , 但 是 有 时 会 有 些 你 不 知 底细 的 人 来 要 求 跟 你 交换 
链接 ， 那 么 在 跟 人 交换 链接 的 时 候 ， 要 旁 虑 清楚 这 个 交换 是 不 古 给 你 们 双方 都 带 来 一 样 的 好 处 。 


18.6 ”到 最 后 其 实 都 是 弟 识 


如 末 你 读 完 了 这 一 草 并 且 贫 得 这 草 并 设 有 讲 什么 新 东西 啊 ， 那 你 算是 上 道 了 。 关 于 SEO, 
并 不 存在 什么 魔法 。 想 要 一 下 子 候 到 Google 搜索 结 末 的 顶 凯 且 保 持 很 长 一 段 时 间 ， 古 不 太 可 能 
的 。 ALE AH HES Be ik AS DEF, 但 是 本 草 谈 论 的 话题 定 搜索 引 营 优化 , 而 不 是 搜索 引擎 欺诈 。 


如 采 页 面 内 容 写 得 不 错 且 可 以 保持 更 新 ， 对 用 户 有 帮助 ， 并 且 为 你 赢 来 了 一 些 外 链 ， 这 些 外 
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链 将 会 帮助 你 提高 网 站 在 搜索 引擎 中 的 排名 。 所 以 ， 下 次 你 的 老板 或 者 客户 想 要 雇佣 一 个 “SEO 


专家 ”的 时 候 ， 建 议 他 们 雇佣 一 个 优秀 的 网 站 编辑 ， 负 贡 编 写 页 面 内 容 。 如 来 你 开发 的 网 站 确实 
有 一 些 东 西 吸引 用 户 ， 并 且 愿 意 做 外 链 ， 那 所 谓 的 优化 的 结 来 就 会 自己 找 上 门 来 。 





18.7 小结 


本 革 中 你 学 会 了 如 何在 不 影响 可 用 性 的 前 提 下 提升 页 和 面 对 搜索 引擎 的 可 见 度 。 搜索 引擎 优化 
对 你 来 说 是 一 个 长 久 的 任务 ， 因 为 规则 时 时 在 变 。 


第 79 章 
针对 移动 设备 的 设计 


Foodbox 的 老板 又 在 名 晚 你 了 。 他 们 发 现 不 管 到 哪儿 ， 都 有 人 在 用 和 赫 每 、iPhone、Windows 
Mobile 或 者 其 他 移动 设备 上 网 ， 所 以 他 们 希望 你 能 提供 一 个 移动 版 的 Foodbox， 好 让 用 户 在 杂货 
店 里 买 东 西 的 时 候 也 能 通过 网 站 来 查 菜谱 。 

只 有 了 解 移动 设备 的 用 户 , 才能 做 好 适合 移动 设备 的 设计 。 如 果 你 真 地 确定 要 照顾 到 这 一 类 
用 户 ， 那 你 先 要 去 了 解 一 些 不 同 的 移动 平台 ， 然 后 再 确定 哪个 平台 是 最 适合 你 去 支持 的 。 这 个 过 
程 有 助 于 制定 一 个 可 以 实施 的 移动 平台 计划 。 


19.1 移动 用 成 

移动 用 户 同 桌面 用 户 和 笔记 本 用 户 的 需求 不 同 。 

首先 , 移动 用 户 浏览 网 页 的 目的 不 一 样 。 他 们 不 会 用 手机 上 过 于 小 巧 的 按键 在 页 面 上 输入 整 
个 菜谱 , 但 是 却 有 可 能 在 杂货 铺 搜索 今 晚 晚餐 的 食材 。 所 以 你 可 能 只 需要 为 移动 用 户 提供 一 个 现 
有 网 站 功能 的 子 集 就 够 了 。 

其 次 , 移动 网 络 的 网 速 总 是 很 慢 , 而 用 户 会 期 待 页 面 载 入 速度 不 要 太 慢 。 在 我 写 这 本 书 的 时 
侠 ，3G 服务 在 美国 还 没有 完全 普及 ， 大 多 数 的 数据 套餐 都 很 慢 很 慢 。 

再 次 ， 用 户 希望 在 移动 设备 上 浏览 网 页 的 时 候 ， 网 页 可 以 适应 小 屏幕 的 阅读 环境 。 在 
iPhone 里 ，Foodbox 的 设计 被 完好 地 保留 ， 但 是 如 果 不 放大 ， 用 户 很 难看 清 页 面 上 的 内 容 ， 
如 图 19-1 所 示 。 另 外 ，Opera 移动 版 也 保留 了 页 面 的 样式 ， 但 是 你 几乎 看 不 清 任何 文字 ( 参 
见 图 19-2), 

最 后 ， 应 该 让 用 户 能 够 轻易 地 发 现 他 们 正在 查找 的 东西 。 对 于 使 用 手机 键盘 的 用 户 来 说 ， 专 
为 普通 用 户 设计 的 那 一 套 导航 结构 显得 过 于 笨重 。 


在 移动 版 的 Foodbox 里 ， 我 们 将 为 用 户 解 决 这 几 个 问题 。 
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19-1 iPhone Safari 里 Foodbox 的 模样 19-2 Opera 移动 版 中 的 Foodbox 


19.2 KF (很 ) 小 屏幕 


如 和 东 人 人 都 用 iPhone, 那 开发 人 员 不 用 费 太 多 工夫 就 能 让 页 面 正常 运转 。iPhone NE 了 一 个 
BRA bier, AAD HY We SLED Fey JavaScript 的 文 持 。 但 是 大 部 分 人 都 不 用 iPhone, 
大 多 数 人 用 的 都 是 有 着 2~3 英寸 屏幕 的 手机 , 这 些 手 机 往往 有 一 个 不 支持 脚本 语言 的 专用 浏览 
妖 。 小 尺寸 的 屏 希 让 你 没有 多 少 空 间 可 以 用 来 显示 信息 , 这 读 味 我 们 不 得 不 抛弃 一 部 分 现 有 页 面 
的 内 容 。 

比如 ,在 一 个 正 第 的 放 贤 带 中 ,你 可 能 会 把 每 一 页 的 导航 都 重新 设计 一 下 。 但 古 现 在 不 得 不 
地 弃 这 些 东 西 ， 因 为 没有 足够 的 屏 莫 空间。 当然, 这 并 不 是 说 用 户 不 会 在 页 面 到 处 看 一 一 我 们 需 
要 做 的 是 将 导航 染 单 换 成 简单 的 不 市 样式 的 页 面 列 表 。 保 持 页 面 的 朴素 可 以 减少 下 载 和 加 载 时 
H, ETAJ RMR EAA TTA h EHIE N. 


WARFARE TA, Deanem ARIC. FIC PRE RRA 
点 的 页 头 图 片 , 要 么 把 它 换 成 文字 , 要 么 用 你 学 到 的 缩放 技巧 缩小 Banner 的 体积 (参见 第 17). 


D 1 英寸 -2.54 厘米 。 一 编者 注 
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为 了 在 小 屏 医 上 显示 出 更 多 内 容 , 一些 设 备 会 将 寻 航 隐 震 。 所 以 你 可 能 需要 设计 目 己 的 后 退 
按钮 ， 以 简化 移动 版 页 面 上 用 户 的 浏览 过 程 。 

最 后 ， 要 记 住 保持 文字 的 可 读 性 。 大 多 数 用 户 在 看 不 清 内 容 的 时 候 ， 不 会 睐 着 眼睛 读 ， 而 是 
直接 跳 过 去 ， 并 且 多 数 设 备 是 没有 缩放 功能 的 。 











19.3 JavaScript 


人 很 多 移动 设备 不 支持 JavaScript。 虽 然 iPhone 支持 JavaScript 并 且 很 依赖 它 ， 但 古 现 在 市 面 
上 大 部 分 汰 每 手机 完全 不 文 持 JavaScript。 我 其 实 并 不 太 担 心 这 个 问题 。 因 为 我 从 来 没有 提倡 过 
将 页 面 的 重要 功能 单独 用 JavaScript 实现 ， 除 非 你 能 提供 一 种 备 选 方案 一 一 你 应 该 还 记得 屏幕 较 
bear x} JavaScript 也 不 是 很 友好 。 


19.4 提供 移动 版 


有 很 多 方法 可 以 让 你 为 用 户 提供 适合 移动 设备 的 内 容 。 比 如 你 可 以 为 移动 设备 单独 设计 一 矢 
样式 表 ， 然 后 通过 判断 用 户 代 理 (user agent) 来 决定 提供 哪些 不 同 的 样式 表 给 不 同 的 用 户 。 你 还 
可 以 将 移动 版 的 内 容 放 在 一 个 单独 的 URL 里 面 。 


19.4.1 移动 版 样式 表 

CSS 标准 为 媒体 类 型 (media type) 属性 提供 了 一 个 值 叫做 handhe1d， 这 个 值 是 为 了 样式 表 
在 移动 设备 上 的 使 用 而 设计 的 。 在 14.2 市 中 ， 为 打印 功能 专门 设计 了 一 父 样 式 表 。 现 在 你 可 以 
用 同样 的 方法 来 为 移动 设备 准备 一 套 样式 表 。 乍 一 看 ， 这 是 一 个 最 好 最 直接 的 方式 ， 但 是 它 有 一 
个 致命 的 问题 : 没有 人 用 这 个 属性 值 。 

iPhone, iPod Touch 和 Windows Mobile 试图 为 用 户 提 供 “ 真 实 ” 的 互联 网 体验 ， 所 以 它们 会 
去 加 载 那 些 为 桌面 客户 端 准备 的 样式 表 。 
19.4.2 ”用户 代 理 探测 

很 多 用 户 将 用 户 代 理 探 测 和 后 台 技 术 (或 服务 器 配置 ) 结合 起 来 ， 为 不 同 平 台 上 的 用 户 提 供 
不 同 的 设计 。 这 似乎 是 个 不 错 的 主意 ， 只 是 有 些 用 户 可 能 不 会 这 么 认为 。 

比如 ,Apple 的 开发 者 指南 就 不 建议 iPhone 开发 者 为 iPhone 提供 一 套 全 新 的 页 面 。 因 为 如 果 
用 户 看 到 的 不 是 他 们 期 待 的 网 站 而 是 一 个 新 页 面 ， 他 们 会 觉得 奇怪 。Apple 建议 的 是 ， 当 检测 到 
用 户 在 使 用 iPhone 的 时 候 ， 给 他 们 一 个 连接 到 优化 页 面 的 链接 ， 然 后 让 用 户 上 自己 决定 是 要 用 优 
化 过 的 页 面 还 是 原始 页 面 。Twitter 和 Amazon 都 为 用 户 提供 了 回 到 原始 页 面 的 链接 。 当 用 户 通 过 
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移动 设备 访问 Foodbox 的 时 候 ， 你 应 该 为 它 建 立 一 个 cookie, 等 用 户 下 次 再 通过 移动 设备 访问 网 
站 的 时 候 ， 帮 他 们 自动 跳 转 到 移动 页 面 。 


19.4.3 ”使 用 子 域名 
你 也 可 以 在 子 域 名 下 架设 移动 版 网 页 。 这 个 方法 要 求 用 户 知 道 移动 版 网 站 的 地 址 , 也 就 是 说 ， 
你 需要 在 主页 上 为 这 个 地 址 大 做 广告 。 


为 了 不 产生 额外 的 文件 ,可 以 将 移动 版 的 地 址 指向 原版 页 面 的 文件 , 然后 通过 服务 副 问 的 代 
码 做 判断 ， 如 末 是 从 子 域名 过 来 的 链接 ， 则 提供 相应 的 样式 表 ， 为 移动 用 户 呈 现 一 个 完全 不 同 的 
版 式 。 我 更 倾向 于 用 这 个 方法 。 


19.5 ”做 决定 一 一 到 底 要 支持 什么 平台 


市 面 上 的 移动 浏 览 薄 有 很 多 ， 它 们 显示 页 面 的 方 却 各 不 相同 。 你 必须 做 出 决定 ， 看 看 将 主要 
精力 放 在 哪儿 个 上 面 , 还 有 哪些 古 不 用 太 操 心 的 。 我 建议 你 把 之 前 挑选 保 面 麟 贤 带 的 流程 再 走 一 
近 ， 记 住 要 选 那 些 最 受 欢 迎 的 。 男 外 ,还 要 搞 清 楚 你 的 客户 或 者 老板 用 的 什么 型 号 的 手机 , 一定 
也 要 提供 对 这 些 手机 的 支持 | 











测试 移动 设备 上 的 设计 
你 可 能 有 真实 的 设备 去 测试 网 站 ， 也 可 以 用 那些 很 受 欢迎 的 平台 的 模拟 器 来 测 : 
QO BlackBerry 
http://www.blackberry.com/developers/downloads/simulators/index.shtml” 
Q Google Android 
http://code.google.com/android/reference/emulator.html 
QO iPhone 
http://marketcircle.com/iphoney/~” 
QO Opera Mini 
http://www.opera.com/mini/demo/ 


Q Windows Mobile 
http://www.nsbasic.com/ce/info/technotes/TN23.htm 





D Bate TiRS RP OL Baas, TAA EFA A SB as OT OB PL 
@ 在 写 这 本 书 的 时 候 ，iPhone 只 能 在 Mac 上 运行 。 安 装 了 Safari 的 Windows 可 以 在 http:/www.testiphone.com/ 上 找 
到 不 错 的 模拟 器 ， 但 是 没有 用 户 代理 探测 这 个 功能 。 
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AdMob 网 站 提供 了 一 些 非 稼 好 的 数据 ， 可 以 根据 这 些 数据 来 判断 哪些 移动 平台 是 最 受 欢迎 
的 。AdMob 提供 服务 给 开发 者 ， 让 它们 把 广告 投放 到 移动 软件 和 网 站 上 ， 它 并 不 是 唯一 一 家 ， 
却 是 最 大 的 一 家 。 通 常情 况 下 ， 如 琳 你 还 没有 开始 收集 目 己 的 数据 ， 那么 还 是 需要 依赖 一 个 第 三 
Fi EVE ABA 


AdMob 的 数据 资料 显示 大 部 分 用 户 使 用 iPhone， 但 我 们 还 是 做 一 个 可 以 在 几 种 不 同 设备 上 
运行 的 页 面 吧 。 


现在 我 们 了 解 到 ， 大 多 数 手 机 不 支持 JavaScript， 而 且 屏 幕 也 很 小 ,用户 期 待 可 以 快速 地 下 


19.5.1 在 不 产生 重复 内 容 的 情况 下 制作 一 个 镜像 


最 有 效 的 流失 用 户 的 方法 就 是 建立 一 个 移动 版 本 的 网 站 , 但 是 不 为 它 更 新 。 这 本 书写 到 现在 ， 
fide FEF HTML 实现 我 们 的 设计 ， 并 没有 涉及 任何 服务 磺 端 的 技术 。 但 是 ， 我 一 直 假 设 的 是 这 
本 书 的 读者 是 一 个 开发 人 员 ， 你 应 该 具备 一 些 建设 动态 网 站 的 知识 。 


在 这 个 前 捉 下 ， 为 网 站 设立 一 个 新 域名 ， 并 把 它 指 向 主 域名 。 然 后 再 用 一 些 服务 强 问 的 远 
辑 来 判断 用 户 请 求 的 URL, EF, 我 会 教 你 如 何 用 PHP 将 静态 的 网 站 转换 成 一 个 适合 移动 设 
备 的 页 面 。 然 后 ， 你 根据 目 己 网 站 的 不 同 设计 ， 可 以 按时 这 个 过 程 修 改 目 己 的 域名 。 


这 本 书 并 不 会 真正 涉及 运 维 方面 的 东西 ， 因 此 你 的 主机 提供 商 仍 然 负 和 贡 帮 你 设置 多 个 域名 。 
你 应 该 在 DNS 上 建立 一 个 新 的 记录 ， 将 子 域名 指 问 主 域名 的 IP: 


www.yourfoodbox.com A 12.34.56.78 
m. yourfoodbox.com A 12.34.56.78 


一 些 主机 服务 商 《〈 像 Dreamhost”) 会 提供 很 简便 易 行 的 方式 设置 域名 的 镜像 。 你 可 以 找 服 务 
商 、 系 统管 理 员 询问 如 何 设置 域名 ， 也 可 以 看 服务 背 的 说 明 书 。 无 论 怎样 ， 你 要 做 的 都 是 将 两 个 
域名 指 问 同一 台 服 务 副 。 


如 末 征 在 本 机 测试 ， 那 么 可 以 在 本 地 的 hosts 文件 中 做 出 如 下 改动 : 


127.0.0.1 localhost www.yourfoodbox.dev  m.yourfoodbox.dev 


如 杂 用 的 是 Windows HL, hosts 文件 在 c:\windows\system32\drivers\etc\hosts; 在 大 多 数 的 
Linux HLH OS X 系统 里 ， 这 个 文件 在 /etchosts。 修 改 这 个 文件 需要 系统 管理 员 权 限 。 














© http://www.testiphone.com/, 
@ http://www.dreamhost.com/, 
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19.5.2 调整 内 容 


有 好 几 种 方法 可 以 调整 页 面 内 容 使 之 适合 移动 设备 , 但 古 仔细 研究 一 下 , 会 发 现 这 些 方法 都 
有 问题 。 不 能 用 handheld 属性 值 来 制定 样式 表 ， 因 为 大 多 数 议 蜗 如 部 不 承认 这 个 值 ， 也 不 会 去 
找 为 大 屏幕 准备 的 样式 表 ， 因 此 这 个 方法 行 不 通 。 我 们 也 曾 讨论 过 移动 用 户 会 更 加 专注 于 内 容 ， 
同时 他 们 的 连接 速度 不 是 很 快 。 这 就 需要 将 发 送出 去 的 数据 的 体积 尽量 缩小 , 这 样 页 面 的 载 人 速 
度 才 会 变 快 。 我 们 需要 抛弃 无 用 的 负担 ， 为 用 户 展 示 一 个 基本 的 页 面 。 


在 关 掉 样式 的 情况 下 ， 页 面 在 手机 上 的 可 用 性 出 乎 意料 地 好 。 我 们 还 可 以 禁止 所 有 的 图 片 ， 
并 将 图 片 形式 的 超 链接 换 成 普通 的 文字 连接 。 于 是 我 想到 早 在 2005 年 ， 一 个 叫做 老死 。 戴维森 
所 创造 的 一 个 极 具 创意 的 想法 可 能 会 古 最 适合 我 们 的 方法 。- 

麦克 的 方式 是 这 样 的 ， 它 用 PHP 处 理 所 有 的 HTML 页 面 ， 挑 出 里 面 的 内 容 一 一 但 是 这 种 情 
况 只 有 在 为 移动 页 面 准备 的 域名 下 才 会 发 生 。 只 用 做 一 点 小 小 的 修改 , 他 的 这 个 方法 就 能 迅速 用 
在 我 们 的 页 面 上 ， 为 我 们 创造 一 个 移动 版 本 的 页 面 。 为 了 使 用 这 个 方法 ， 你 需要 一 个 Apache 软 
件 ， 并 且 将 它 配置 一 下 ， 使 之 能 够 解析 PHP 页 。 我 假设 你 已 经 搭建 好 了 这 个 环境 。 

你 要 确保 Apache LA PHP 模式 运行 的 ,这 样 这 个 方法 才 行 得 通 。 同 时 ,还 要 确认 PHP 是 开 
局 状态 。 如 采 主 机 上 不 征用 PHP 来 运行 CGI 程序 的 ， 那 这 个 方法 也 不 会 成 功 。 如 采 想 要 确定 一 
下 上 自己 的 配置 有 没有 问题 ,你 可 以 在 主机 上 新 建 一 个 叫做 info.php 的 文件 ， 并 在 里 面 加 入 这 样 的 
内 容 : 


mobile/info.php 











<?php phpinfo(); ?> 
接 下 来 ， 你 会 看 到 如 图 19-3 上 显示 的 内 容 ， 里 面 的 Servr API 应 该 是 Apache2.0 模块 。” 


这 里 需要 一 个 特殊 的 目录 ， 并 告诉 Apache 所 有 对 HTML 的 处 理 都 要 转移 到 PAP 解释 如 中 ， 
这 样 过 滤 程 序 才 能 正常 工作 。 改 动 网 站 根 目录 的 .htaccess 文件 可 以 实现 这 个 要 求 ， 在 文件 里 加 入 
下 面 一 行 代码 : 
mobile/.htaccess 


AddType application/x-httpd-php .html .htm 
这 样 一 来 ，PHP fe ae TE ATA AY HTML 文件 。 


© http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly, 

@ Dreamhost (http://www.dreamhost.com/) 提供 便宜 的 主机 计划 ， 它 们 的 主机 已 经 包含 了 我 上 面 说 的 这 些 环境 。 如 
采 不 想 上 自己 搭建 ， 你 可 以 去 用 它们 的 服务 。 我 甚至 申请 了 一 个 折扣 码 WDFD， 用 这 个 码 你 可 以 拿 到 折扣 。 

© 如 果 你 对 PHP 一 点 都 不 了 解 ， 那 就 去 学 学 吧 。 这 并 不 是 我 最 爱 的 语言 ， 但 是 我 认为 每 一 个 做 网 络 开 发 的 程序 员 
都 应 该 对 它 有 所 了 解 。 这 个 语言 很 灵活 、 强 大 而 且 有 广泛 的 支持 。 
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图 19-3 ”用 Apache 设置 成 功 的 PHP 


19.5.3 ”处 理 程序 


i TS AS RORY PHP 特性 ， 包 括 autoprepend 和 autoappend。 这 个 特性 可 以 让 你 在 
每 次 页 面 请 求 之 前 和 请 求 之 后 执行 一 些 代码 。 可 以 用 这 个 技巧 来 写 系 统 日 志 , 或 者 是 设置 一 些 保 
留 变量 。 男 外 还 可 以 用 这 个 技术 来 捕获 缓存 下 来 的 服务 姓 啊 应 ， 并 对 它 加 以 解析 。 


这 里 以 麦克 的 初始 程序 为 监 本 ， 先 写 prepend 的 脚本 。 
新 建 一 个 叫做 global_prepend.php 的 文件 ， 在 其 中 添加 下 面 的 代码 : 


mobile/global_prepend.php 


<?php 
function callback($b) { 


$mobile_domain = "m.yourfoodbox.com"; 


$web_domain = "www.yourfoodbox.com"; 
if ($ SERVER[ 'SERVER_NAME'] == $mobile_domain) { 


// replace www.yourfoodbox.com with m.yourfoodb.com 
$b = str_replace($web_domain, $mobile_domain, $b); 


// replace all hyperlinked images with regular links, using the alt text 
$b = preg_replace('/(<a[A>] +>) (<img[A>]+alt=") C([A"]*) C [A>] #>) (<\/a>)/1',; 
‘<p Class="lTink">$1$3$5</p>', $b); 


// replace images with paragraph tags 
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$b = preg_replace( '/(<img[A>]+al t=") C[A"]*#) C" [A>] =>) /7', 
'<p class="image">[$2]</p>', $b); 


// strip out stylesheet calls 
$b = preg_replace('/(<link[A>]+rel="[A"]«stylesheet"[A>]*#>]style="([A"]«")/i', 
“Ds 


//remove scripts 
$b = preg_replace('/<script[A>]*>.*?<\/script>/i1', '', $b); 


// remove style tags and comments 
$b = preg_replace('/<style[A>] «>. *?<\/style>|<!--.*?-->/i', '', $b); 


// add robots nofollow directive to keep the search engines out! 
$b = preg_replace( '/<\/head>/i', 
‘<meta name="robots" content="noindex, nofollow"></head>', $b); 


} 


return $b; 


} 
ob _startC"callback"); 
{> 


第 2 行 的 代码 定义 了 一 个 把 HTML 页 变 成 字符 串 的 函数 ， 接 下 来 的 两 行 定义 了 两 个 变量 ， 
里 面 存 的 是 正 第 域名 和 移动 版 域名 。 第 7 行 的 代码 将 用 户 请 求 的 域名 同 移动 版 域名 做 对 比 ， 如 果 
一 样 ， 会 把 页 面 内 容 过 着 一 所 。 


在 第 10 行 里 ,将 页 面 上 所 有 的 正常 域名 都 换 成 了 移动 版 域名 。 这 一 步 意味 着 你 手写 在 网 页 
里 的 域名 也 会 被 替换 ， 以 防止 用 户 误 入 普通 版 域名 。 然 后 是 第 12 行 ， 这 一 行 殖 换 掉 了 所 有 带 链 
接 的 图 片 ， 比如 注册 和 登录 按钮 , 具体 蔡 换 方法 古 用 原 有 图 片 里 alt 属性 的 值 代 检 图 片 成 为 普通 
链接 。 第 16 行 代码 做 的 事情 古 将 普通 图 片 蔡 换 成 用 方 括 号 括 起 来 的 alt 文字 。 


从 第 20 行 开始 ， 逐 步 去 掉 页 面 里 的 样式 表 链 接 、 脚 本 调用 、 直 接 插 入 的 样式 和 注释 。 这 样 
做 能 有 效 减 少 向 移动 设备 发 送 的 数据 量 ， 从 而 提高 页 面 的 表现 。 有 些 用 户 在 移动 设备 上 收发 数据 
古 按 照 流 量 计 费 的 ， 这 个 做 法 会 让 他 们 很 开心 。 

第 30 行 是 最 后 一 步 , EE head 标签 结束 之 前 加 了 一 行 声明 , 拒绝 搜索 5| 敬 索引 页 面 内 容 和 
页 面 链接 。 我 们 可 不 硕 望 因为 有 同一 个 网 页 的 两 个 版 本 而 被 搜索 ?| 擎 惩 如 。 

页 面 内 容 过 小 差不多 完成 了 ,最 后 函数 返回 了 这 个 字符 串 。 在 第 38 行 调 用 了 ob_start 方法 ， 
开局 了 输出 缓存 ， 并 将 callback 函数 作为 参数 传 给 了 它 ， 这 样 在 请 求 结束 的 时 候 这 个 函数 就 会 
被 执行 。 然 后 需要 一 个 global_pappend.php 文件 来 做 内 容 输 出 ， 把 这 个 输出 添加 在 返回 请 求 的 
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后 面 : 


mobile/global_append.php 


<?php 
ob_end_flush(); 


?> 
这 个 文件 将 转换 好 的 内 容 发 送出 去 ， 并 将 之 呈现 成 页 面 。 如 有 果 役 有 这 一 步 ， 就 什么 东西 也 
看 不 到 了 。 现 在 ， 只 和 需要 油 活 刚刚 我 们 写 的 过 滤 备 就 好 了 ， 方 法 是 在 .htaccess 文件 里 加 上 下 面 
MÍT: 
mobile/.htaccess 


php_value auto_prepend_file /home/yourfoodbox/yourfoodbox.com/global_prepend. php 
php_value auto_append_file /home/yourfoodbox/yourfoodbox.com/global_append. php 


FR ED Be FS ile HAAS SC PP AZ TR TS. TEMS a LSE NE, 你 就 已 经 为 移动 流量 作 好 
TER! 


19.5.4 ”进一步 改进 


页 面 的 移动 版 看 起 来 还 不 错 ， 但 是 仍然 可 以 对 它 的 可 用 性 做 一 些 改进 。 现 在 ， 虽 然 页 面 顶 部 
有 个 跳 转 链接 可 以 让 用 户 直 接 看 到 内 容 , 但 是 如 朱 把 登录 和 注册 链接 也 放 在 这 个 区 域 , 会 员 用 户 
用 起 来 应 该 会 更 方便 。 另 外 ， 这 个 做 法 对 使 用 屏幕 阅读 器 的 用 户 也 是 个 好 消息 。 








FastCGI 中 的 PHP 


即便 服务 器 用 的 不 是 Apache 的 PHP 服务 ， 你 照样 可 以 使 用 上 面 提 到 的 技巧 。 但 是 不 能 
再 用 .htaccess 来 定义 auto_append 的 值 了 ,你 应 该 把 相关 的 目录 写 在 服务 器 的 php.ini 文 件 中 。 
auto_prepend_file = 
/home/yourfoodbox/your foodbox.com/global_prepend.php 
auto_append_file = 
/home/yourfoodbox/your foodbox.com/global_append. php 
最 后 ， 在 .htaccess 文件 中 设 定 让 HTML 页 面 由 FastCGI 处 理 : 
AddType php5-cgi .html .htm 
具体 的 AddType 设置 是 跟 Web 服务器 相关 的 ， 所 以 如 果 遇 到 问题 ， 请 参照 相关 文档 ， 


或 询问 系统 管理 员 或 是 空间 提供 商 。 
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章 为 你 提供 了 一 个 快速 的 解决 方案 , 但 是 对 于 一 个 复杂 的 网 站 来 说 , 这 种 程度 的 解决 方案 
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古 远 远 不 够 的 ,我 们 刚刚 讨论 过 移动 版 用 户 的 独特 需求 ,以 及 对 于 他 们 来 讲 哪些 内 容 是 不 需要 的 。 
我 们 可 能 需要 借用 服务 给 端 技术 ,根据 不 同 的 用 户 代理 返回 不 同 的 界面 。 这 些 内 容 超 过 了 本 书 的 
bew W, 但 也 不 是 那么 困难 。 特 别 是 如 采 网 站 有 一 个 内 容 管理 系统 或 是 育 后 有 一 个 服务 人 左 支 持 
的 话 ， 从 服务 疹 交 来 解决 移动 版 的 问题 会 更 加 容易 。 





19.7 小结 





移动 用 户 正 在 快速 增长 ， 并 且 它 们 拥有 完全 不 同 于 桌面 用 户 的 需求 。 随 着 类 似 Google #7% 
末 手 机 技术 的 普及 ， 将 可 以 为 用 户 提供 更 丰 寅 的 体验 、 更 多 样 的 互动 。 现 在 ， 你 已 经 具备 了 相应 
的 知识 和 使 用 相关 工具 的 技能 ， 可 以 在 几乎 所 有 的 手机 平台 上 ,为 大 部 分 用 户 提供 一 个 可 用 的 移 
动 网 站 。 
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再 好 的 设计 也 会 被 很 糟糕 的 实现 打败 。 我 们 花 了 大 力气 来 打造 一 个 稳固 的 网 站 ,如 采用 户 需 
要 很 长 时 间 才能 载 入 我 们 的 页 面 ， 那 将 是 个 很 大 的 遗憾 。 如 采 能 确定 可 能 发 和 后 问题 的 地 方 ， 那么 
RA TA HE A te ei RE PERE 


20.1 优化 性 能 的 策略 


性 能 优化 指 的 是 在 用 户 那 里 页 面 能 够 更 快 地 载 入 。 在 服务 需 端 , 可 能 会 用 到 像 缓 存 动态 构建 页 
面 的 方法 。 当 将 服务 絮 的 性 能 压榨 完 之 后 , 仍然 可 以 从 页 面 设计 方面 入 手 , 找到 一 个 可 能 在 客户 端 
影响 性 能 的 因素 。 驻 运 的 是 ， 对 这 些 问题 的 定位 和 解决 过 程 是 相当 简单 的 。 

首先 ， 看 看 HTML, CSS 和 JavaScript 文 件 的 大 小 。 这 些 文件 里 所 包含 的 字符 数 的 多 少将 直接 
影响 到 传送 这 些 文件 到 客户 端 所 耗费 的 时 间 。 你 需要 将 它们 的 体积 缩减 到 最 小 。 你 也 许 会 作 得 这 有 
点 微不足道 ， 但 是 如 采 服 务 代 一 天 有 数 千 请 求 ， 那 这 些 字 区 的 累积 量 将 会 相当 可 观 。 


然后 ， 检 碍 一 下 页 面 上 的 图 片 大 小 。 在 早 些 时 候 我 们 谈 到 过 图 斤 优 化 ,但 是 在 把 图 片 正 式 放 
到 网 页 里 的 时 候 ， 我 们 会 经 前 局 记 压 缩 和 缩放 图 片 。 另 外 有 些 图 片 类 型 的 压缩 量 ， 可 以 远 超 
Photoshop 所 能 提供 的 最 大 值 。 


另外 还 要 检查 训 贤 谷 的 文件 请 求 量 ， 如 采 页 面 上 链接 有 3 个 样式 表 、2 个 JavaScript 脚本 文 
件 和 5S5 张 图 片 ， 那 么 一 次 访问 将 会 给 服务 器 带 来 11 次 请 求 。 用 户 的 客户 端 首先 会 把 HTML 文件 
下 载 下 来 ， 然 后 再 加 服务 磊 发 出 别 的 所 需 文件 的 请 求 。 

从 男 一 个 角度 来 看 ， 用户 可 能 不 会 发 出 那么 多 请 求 , 因为 大 多 数 的 图 片 和 脚本 文件 都 会 缓存 
在 他 们 的 本 地 机 器 上 。 但是， 如果 页 面 上 的 东西 过 多 , 这些 用 户 也 有 可 能 磁 到 载 入 速度 过 慢 的 情 
况 ， 因 为 还 有 个 特殊 情况 需要 考虑 ， 那 就 是 HITP1.1 标准 。 这 个 标准 推荐 在 同一 时 间 点 ， 训 览 








© http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4, 
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pn 
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最 后 ， 要 挑 出 那些 不 会 经 党 改动 的 文件 ,以便 采用 某 种 措施 来 防止 用 户 的 训 览 绒 过 于 频繁 地 
检查 这 些 文件 是 否 有 更 新 。 比 如 说 ,如果 你 刚刚 完成 新 一 版 的 设计 , 那么 大 可 放心 地 告诉 客户 端 ， 
把 Logo、 样 式 表 和 脚本 语言 的 缓存 上 时间 加 长 吧 | 


现在 回 到 Foodbox， 看 看 如 何 检查 上 述 策 略 。 
20.2 ”确定 影响 性 能 的 因素 


不 提倡 过 早 开 始 做 性 能 优化 方面 的 工作 ， 但 同时 也 强调 要 对 可 能 出 现 的 性 能 问题 有 所 了 解 ， 
不 然 开 发 过 程 也 会 出 毛病 。 有 两 种 方法 可 以 让 你 以 第 三 者 的 角度 来 检查 页 和 面 上 的 带 在 问题 。 


注 章 ， 使 用 这 两 种 方法 的 前 提 是 已 将 这 些 页 面 上 传 到 服务 如 ， 可 以 通过 Internet 访问 到 。 





20.2.1 速度 测试 


WebSiteOptimization.com 提供 了 一 套 服 务 , 它 可 以 扫描 任何 一 个 URL, 然后 确定 一 个 页 面 (以 
及 页 面 上 所 有 元 素 ) 的 大 小 和 下 载 次 数 。 这 套 服务 算得 上 十 一 个 好 的 开始 。 在 Firefox 中 Web 
Developer 插件 里 的 Tools 菜单 下 有 个 “Speed Test” 《速度 测试 ) 的 选项 ， 你 可 以 用 它 来 对 页 面 进 
行 速度 方面 的 检查 。 


检查 结 末 显示 网 站 上 有 59 KB 的 图 片 。 作 为 对 比 ， 可 以 看 到 在 微软 的 主页 上 有 大 概 61 KB 的 
RIF, Adobe 的 主页 上 约 有 156 KB 的 图 片 。 在 这 一 项 上 我 们 领先 于 他 们 。 


这 个 测试 还 说 CSS 和 JavaScript 文件 仍 有 压缩 空间 ， 并 提醒 我 们 有 些 图 片 没 有 设 定 长 宽 。 长 
宽 问题 是 在 HTML 文档 中 设 定 的 ， 虽 然 这 看 起 来 并 不 是 一 个 大 问题 (因为 我 们 把 多 数 图 片 放 在 
了 样式 表 里 )， 但 是 修复 这 个 问题 可 以 让 页 面 的 载 入 速度 看 起 来 变 得 快 一 些 ， 因 为 这 样 浏 览 器 就 
可 以 无 需 依赖 样式 表 而 独自 确定 图 片 的 长 宽 了 。 另 外 , 在 HTML 文档 中 定义 图 片 的 宽 和 高 可 以 
LEUI bt as aM A ASC. ALA, ZA img 标签 加 上 height 和 width 属性 以 确定 图 卢 的 宽 





测试 结果 中 真正 让 人 吃惊 的 是 拨号 用 户 的 页 面 访问 时 间 ， 根 据 测 试 报告 ， 一 个 56Kbps 的 找 
写 用 户 需 要 15.59 秒 来 完全 载 人 主页 上 的 图 片 、 样 式 和 内 容 。 这 个 时 间 听 起 来 很 长 ， 但 是 比 起 微 
软 的 主页 仍然 是 小 恶 见 大 巫 一 一 它 需 要 拨 志 链接 的 用 户 等 上 56 秒 还 多 |! 














@ 不 要 天 真 地 以 为 这 种 用 户 不 存在 ， 有 很 多 贫穷 的 地 方 都 没有 高 速 互联 网 。 
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20.2.2 YSlow 


速度 测试 市 给 我 们 很 多 信息 , 但 是 并 没有 在 解决 问题 方面 给 出 太 多 的 建议 。 倒是 雅虎 推出 的 
一 个 Firebug 插件 (是 的 ， 这 是 一 个 插件 的 插件 ) 可 以 为 页 面 打分 ， 然 后 告诉 我 们 导致 页 面 速度 
缓慢 的 原因 。 这 个 插件 叫 YSlow。 


YSlow 可 以 给 页 面 打分 ， 并 且 会 提出 一 些 性 能 方面 的 改进 意见 。 或 许 你 无 法 解决 YSlow fe 
出 的 所 有 问题 ， 但 征 如 采 可 以 解决 挥 那些 稼 见 问 题 ， 效 朱 也 会 非 销 好 。 

YSlow 生成 的 第 一 份 报告 说 我 们 可 以 答 试 一 下 几 种 技巧 : 用 ETIags， 压 缩 并 缩小 脚本 文件 ， 还 
可 以 看 一 看 缓存 过 期 时 间 的 设 定 (参见 图 20-1) ， 在 接 下 来 的 几 贡 中 就 会 讨论 这 几 个 方面 的 问题 。 





区 
Pa w ii Console HTML CSS Script DOM Net YSlowv 





Grade | Components | Statistics | Tools lesets | YSlow(V2) B Edit Printable View | (?) Help v 
Grade @ 1 
ALL (22) FILTER BY: CONTENT (6) | COOKIE (2) | CSS (6) | IMAGES (2) | JAVASCRIPT (4) | SERVER (5) 
A Make fewer HTTP requests 
F Use a Content Delivery Network (CDN) Grade A on Make fewer HTTP rere 
F Add Expires headers 
D Compress components with gzip 
A Put CSS at top 
A Put JavaScript at bottom 
A Avoid CSS expressions »Read More 
N/A Make JavaScript and CSS external 
A Reduce DNS lookups 
A Minify JavaScript and CSS 
A Avoid URL redirects 
A Remove duplicate JavaScript and CSS 


图 20-1 YSlow 找到 了 页 面 上 的 几 个 问题 ， 我 们 需要 解决 它们 
20.3 ”解决 性 能 问题 
你 通过 测试 得 到 了 一 些 数据 , 现在 是 该 采取 行动 的 时 候 了 。 你 想 怎么 解决 这 些 和 实在 问题 ? 而 
且 同 以 往 一 样 , 还 需要 去 平衡 菜 种 措施 所 市 来 的 成 本 和 收益 ,而 本 革 介 绍 的 所 有 解决 方案 邦 各 有 
Kil 
20.3.1 设置 超时 报头 


如 果 页 面 上 的 图 片 很 少 变化 ， 可 以 将 内 容 的 超时 时 间 设 在 未 来 的 某 个 上 时间, 间隔 长 达 几 个 小 
时 都 行 。 

如 果 你 用 的 是 Apache 服务 器 并 且 服 务 器 设置 里 面 有 mod_expires 模块 ， 那 么 这 个 模块 里 的 
代码 就 能 帮助 你 将 所 有 改动 过 的 JPEG, GIF 和 PNG 文件 缓存 到 本 地 长 达 1 小 时 。 
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ExpiresActive On 
ExpiresDefault AO 


<FilesMatch "\.Cjpg/png/gif)$"> 
ExpiresDefault A3600 
</FilesMatch> 


其 中 ExpiresDefault 值 将 缓存 过 期 时 间 设 定 成 3600, mi 3600 之 前 的 那个 A 则 代表 的 是 从 第 一 
次 仿 问 开始 。 

ExpiresDefault 的 值 是 以 秒 为 单位 的 。 在 上 面 的 例子 中 ， 将 过 期 时 间 设 定 在 距 上 一 次 修改 
文件 的 一 个 小 时 之 后 。 你 也 应 该 想到 ， 如 果 这 个 服务 各 上 的 图 片 不 是 每 小 时 刷新 一 次 ， 那 这 个 设 
AJL- AHIRA. 


你 还 可 以 写 得 更 具体 一 些 ， 像 这 样 : 


ExpiresActive On 

ExpiresByType text/html "access plus 30 seconds" 
ExpiresByType text/css “access plus 1 hour" 
ExpiresByType text/javascript “access plus 1 hour" 
ExpiresByType image/png "access plus 1 day” 
ExpiresByType image/jpg "access plus 2 months" 
ExpiresByType image/gif "access plus 1 year" 


这 个 方法 可 以 让 你 对 基于 MIME 类 型 的 报头 做 特殊 的 处 理 ， 而 不 仅仅 是 在 报头 后 面 添 加 信 
筷 ， 而 且 这 个 方法 对 后 台 脚 本 也 是 有 好 处 的 。 
还 可 以 设计 个 有 超 长 缓存 时 间 的 报头 ， 它 会 在 很 人 以后 才 过 期 ; 


<FilesMatch "\. (Cjpg/png/gif|css/js)$"> 
Expires A31536000 
</FilesMatch> 


AAU CE SMR SS a Se BI, PERI JavaScript 脚本 文件 后 ， 缓 存 多 长 时 间 才 
会 过 期 。 这 条 规则 可 以 大 大 减 小 服务 左上 来 目 说 览 辈 的 请 求 数 。 

设立 长 期 缓存 时 间 也 契 有 次 闯 的 ， 那 束 是 当 你 需要 更 新 一 个 文件 的 时 候 ， 必 须要 给 这 个 文件 
换 一 个 名 字 , 或 是 用 查询 字符 串 来 指向 文件 ， 因 为 你 无 法 强制 用 户 去 清除 他 们 的 缓存 。 所 以 如 果 
网 页 是 一 个 静态 网 页 ， 那么 我 不 建议 在 经 常 变更 的 文件 上 采取 长 缓存 时 间 的 方法 。 不 过 还 好 , 大 
多 数 网 络 应 用 框架 会 帮 你 处 理 长 缓存 时 间 的 报头 , 框架 所 用 的 方法 也 是 在 部 署 或 者 呈现 页 面 的 时 
修改 变 文件 名 。 如 来 你 用 的 网 络 框架 没有 这 个 功能 ， 那么 在 更 新 文件 的 时 候 束 要 手动 更 新 文件 的 
名 字 。 因 为 你 无 法 让 用 户 的 缓存 过 期 。 


20.3.2 ”用 ETag 改 进 缓存 
现代 浏览 器 在 报头 中 支持 一 种 叫 作 实 体 标签 (entitytag) 的 东西 ， 通 常 又 称 作 ETag。 当 浏览 








3 
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器 请 求 一 个 页 面 的 时 候 ， 它 也 会 记录 这 个 URL 的 ETag 值 。 假如 用 户 再 次 请 求 了 同一 个 页 面 ， 浏 
bh aw SIAR URL 的 ETag 散 列 值 同 之 前 那个 作对 比 ， 如 末 这 两 次 的 ETag ete, ALA Di ot 
妖 就 不 会 去 下 载 那 个 页 面 ， 而 会 从 缓存 中 读 取 内 容 。 这 不 但 减 小 了 带宽 使 用 , 而 且 还 改进 了 用 户 


体验 。 


ETag 可 以 根据 页 面 大 小 、 最 新 改动 时 间 、 校 验 码 或 是 其 他 任何 元 素来 计算 ， 具体 的 计算 方 
法 完全 取决 于 服务 如 。 如 果 你 部 团 了 一 个 服务 妖 端 的 框架 ， 那 么 也 可 以 用 自己 的 方式 来 生成 
ETag， 这 个 方法 对 那些 RSS 订阅 内 容 、 动 态 CSS 和 动态 JavaScript 比较 有 价值 ， 因 为 这 些 内 容 
不 会 有 “最 新 修改 日 期 ”这 个 值 。 

但 是 错误 的 ETag 生成 方法 将 导致 用 户 每 次 访问 的 时 候 都 会 下 载 完 整 的 页 面 ， 这 种 错误 导致 
的 最 坏 后 有 果 是 用 户 根 本 无 法 看 到 页 面 上 的 新 内 容 。 如 果 你 还 为 页 面部 署 了 负载 均衡 服务 器 ， 那么 
它 育 后 的 所 有 服务 如 可 能 会 生成 各 日 不 同 的 ETag。 和 针对 同一 个 页 面 ，Apache 和 IIS 可 能 会 生成 
不 同 的 ETag， 所 以 在 处 理 好 ETag 生成 规则 之 前 ， 你 可 能 需要 稍 后 再 进行 均衡 服务 如 的 部 署 。 

如 采用 的 是 Apache [ks at, ABAE.htaccess 文件 里 加 上 和 下面 这 一 行 ， 就 可 以 设 定好 ETag tk 
kJ: 

FileETag MTime Size 
{TIE EMRE as, M “pS CTIA” AO AER REK ETag, 

1. 在 什么 情况 下 应 该 用 到 ETag 

f RSS 订阅、 网 络 服 务 (Web Service) 或 者 是 blog 这 类 东西 ， 它 们 并 不 会 往 硬盘 里 写 数据 ， 
所 以 也 没有 所 谓 的 “最 新 修改 时 间 ” 可 以 利用 。 在 这 种 情况 下 ， 你 就 需要 在 脚本 中 用 到 ETag。 如 
果 你 用 的 是 服务 右 集 群 来 承载 网 站 ， 那 么 相同 文件 的 “最 新 修改 时 间 ” 会 不 一 样 ， 这 样 就 会 导致 
客户 端 认 为 基 些 文件 没有 被 缓存 ， 因 为 相同 的 页 面 由 于 不 同 的 修改 时 间 而 生成 了 不 同 的 ETag, 

如 采 无 法 保证 “最 新 修改 时 间 ” 的 值 是 准确 的 ， 或 者 你 根本 拿 不 到 这 个 值 ， 那 么 你 可 能 需要 
建立 一 套 目 己 的 机 制 来 生成 ETIag， 这 个 机 制 可 以 是 内 容 的 散 列 表 ， 或 者 是 其 他 特殊 机 人 制 。 

如 条 网 站 后 面 有 一 套 绥 存 机 制 , 那么 ETag 会 非常 有 用 。 前 端的 机 硕 可 根据 ETag 来 决定 是 从 
后 端 服务 器 里 获取 内 容 ， 还 是 将 自己 本 机 缓存 的 内 容 发 送 给 客户 端 。 

2. 禁用 ETag 


对 于 静态 网 站 ， 特 别 是 那些 用 到 报头 中 expires 属性 的 网 站 ，ETag 并 不 十 分 适用 ， 甚 至 还 
会 减 慢 页 面 载 入 速度 。 因 为 只 要 用 到 了 ETag， 客 户 端 就 会 发 送 请 求 给 服务 器 ， 虽 然 服务 器 回应 
的 内 容 并 不 是 完整 的 页 面 ， 但 是 这 个 活动 仍然 增加 了 流量 。 


一 
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在 目前 的 情况 下 ， 还 是 把 ETags 禁用 掉 ， 然 后 完全 依赖 expires 属性 。 在 .htaccess 文件 中 加 
入 下 面 这 一 行 : 

FileETag None 

如 琳 你 没有 忽略 ETag， 并 且 将 它 设置 得 很 完善 ，YSlow 会 给 你 非 第 高 的 分 数 。 可 能 到 最 后 ， 
你 的 网 站 内 容 都 是 建立 在 数据 库 上 的 ， 但 是 又 不 布 望 每 次 接 到 请 求 时 都 需要 程序 从 数据 库 取 数 
据 ， 在 这 种 情况 下 ， 你 可 能 殉 需 要 生成 目 己 的 ETag 或 者 是 expires 属性 ， 然 后 让 代码 根据 这 些 
值 来 判断 十 不 古 要 传送 新 的 内 容 。 


20.3.3 用 资源 服务 器 分 发 请 求 


对 于 那些 特别 大 的 网 站 ， 用 相对 路 径 来 链接 图 片 、 样 式 表 和 脚本 文件 并 不 就 是 最 好 的 方法 。 
很 多 训 蜗 侣 都 会 限制 连接 到 同一 个 服务 右 的 并 发 连接 数量 。 如 采 网 页 上 有 20 个 资源 文件 ， 那 么 
IE 7 HRS THAR eee ACH 20 个 连接 请 求 ， 而 每 次 只 能 建立 2 个 连接 。 这 无 斤 拖 慢 了 页 面 的 速度 。 
有 些 训 览 右 可 能 会 允许 多 一 些 的 并 发 连接 , 但 是 这 也 会 增加 服务 全 负载 。 为 了 能 让 页 面 尽 快 加 载 ， 
最 好 的 方法 是 将 资源 文件 置 于 不 同 的 服务 背 上 。 先 看 看 下 面 的 例子 : 


<img src=""images/banner. .jpg /> 
<script src="scripts/prototype.js'></script> 


而 更 好 的 方法 可 能 会 证 这 种 : 


<img src="http://images .foodbox.com/banner jpg" /> 
<script src="http://scripts.foodbox.com/js/prototype.js'></script> 


看 上 去 , BOOT PAE. CM is REI IPE ES IRS ae, FEA 9b 
部 资源 ， 最 后 你 还 需要 记 住 一 长 串 绝 对 链接 ， 包 括 链接 用 的 协议 ， 是 HTTP 还 是 HITPS。 如 果 
你 做 的 是 电子 商务 网 站 ， 那 么 网 页 应 该 是 在 SSL 下 传输 的 ， 这 样 一 来 页 面 内 所 有 的 外 部 资源 部 
要 用 SSL 来 链接 。 这 意味 着 资源 服务 器 也 要 开局 SSL 服务 ,然后 再 把 http:// 改 成 https://。 如 来 不 
这 样 做 ， 用 户 可 能 会 收 到 安全 警告 ,或 是 影响 有 些 内 容 的 正常 显示 。 


你 还 需要 券 虑 这 个 方法 是 否 值 得 。 除 了 额外 的 服务 器 (更 别提 部 署 服务 絮 资 源 所 消耗 的 人 
力 )， 还 要 洽 虑 客户 端 服务 对 资源 文件 的 缓存 问题 : 通常 这 些 文件 都 是 缓存 在 客户 端的 ， 所 以 它 
们 并 不 会 每 次 部 去 下 载 同样 的 样式 表 或 者 图 片 。 这 种 分 发 的 方法 更 加 适用 于 那些 高 流量 的 网 站 ， 
寺 别 是 对 于 这 些 网 站 的 初次 访问 用 户 来 说 , 提升 会 更 加 明显 。 这 个 方法 也 会 减 小 应 用 服务 絮 的 压 
力 ， 因 为 你 可 以 指定 某 台 服务 融 用 来 专门 供给 图 片 。 

将 这 些 资源 服务 左 推 问 云 背 征 目前 比较 受 欢 迎 的 做 法 , 像 Amazon S3 服务 之 类 的 。 如 琳 有 类 
似 的 需求 ， 那 么 我 建议 你 去 了 解 一 下 这 方面 的 内 容 。 
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20.3.4 文件 压缩 


现代 网 络 服务 器 可 以 提供 压缩 过 后 的 内 容 ， 这 可 以 缩短 下 载 时 间 。 如 果 你 用 的 是 Apache Hk 
务 妖 ， 那 么 在 .htaccess 里 激活 mod_deflate 属性 ， 并 添加 几 条 规则 ， 就 可 以 启动 压缩 功能 : 


AddOutputFilterByType DEFLATE text/html text/css \ 
application/x-javascript 

BrowserMatch AMozilla/4 gzip-only-text/html 

BrowserMatch AMozilla/4\.0[678] no-gzip 

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 


头 两 个 BrowserMatch 规则 的 意思 是 不 要 癌 Netscape 的 老 版 本 发 送 压缩 过 的 内 容 ， 最 后 那 条 
规则 则 针对 伪装 成 Netscape 的 下 重新 开局 压缩 功能 。 


20.3.5 ”压缩 脚本 文件 





可 以 通过 删 
除 注 释 、 换 行 和 空格 的 方式 来 减 小 文件 体积 。 你 还 可 以 通过 缩短 变量 和 国 数 名 的 方法 来 压缩 
JavaScript， 同 时 减少 文字 的 数量 。 

可 能 你 会 涡 得 这 没什么 ， 特 别 是 已 经 通过 服务 如 来 提供 压缩 后 的 内 容 了 。 然 而， 通过 去 挥 
文件 里 的 很 多 注释 和 空格 ， 文 件 体 积 其 实 可 以 大 大 减 小 ， 而 压缩 工具 并 不 能 压缩 挥 如 此 之 多 的 
文字 。 

雅虎 提供 了 YUI 压 缩 工具 ”， 这 是 一 个 基于 命令 行 的 组 件 ， 可 以 压缩 JavaScript 和 CSS 的 体 
只 ， 使 用 起 来 也 很 俐 单 : 


java -jar yuicompressor-2.4.2.jar \ 
--type js prototype.js > prototype.min.js 


你 可 以 在 开发 环境 下 保持 样式 表 和 脚本 文件 的 格式 ， 然 后 复制 这 些 文件 ， 并 用 YUI 工具 压 
缩 ， 将 压缩 后 的 文件 部 署 到 生产 环境 中 就 完工 了 。 

体积 压缩 和 自动 化 部 署 

专业 的 网 络 开发 人 员 会 把 部 署 过 程 自动 化 。 因 为 人 工 上 传 过 程 太 枯燥 了 ,而 且 开 发 人 员 需 要 
不 停 地 做 这 件 事 情 。 将 部 车 过 程 自 动 化 后 ， 只 需 一 次 布置 ， 束 能 让 机 替 上 自己 处 理 相 关 事务 了 ， 而 
且 目 动 化 可 以 确保 所 有 的 文件 和 步骤 不 被 遗漏 。 

如 末 你 的 系统 里 已 经 有 了 自动 化 部 署 , 往 里 面 加 入 压缩 文件 的 步骤 应 该 不 是 很 困难 。 你 其 至 
都 不 需要 很 复杂 的 框架 ， 单单 是 一 个 人 简单 的 Ruby 脚本 就 能 压缩 CSS 和 JavaScript 文件 体积 了 ， 




















®© http://developer.yahoo.com/yui/compressotr/ , 
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然后 还 能 将 它们 上 传 到 网 络 服务 如 具体 脚本 在 下 面 , 注意 这 个 脚本 需要 get-scp 包 (gem) 。 
你 要 做 的 只 是 设置 好 远程 服务 融 ， 然 后 调用 本 地 的 YUI 压缩 工具 就 行 。 我 建议 将 所 有 YUI 压缩 
工具 的 JAR 文件 放 秆 在 一 个 bin 文 件 夹 里 然后 将 这 个 文件 来 放 在 项 目 目录 下 : 


performance/deploy.rb 


# Scans your project for CSS and JS files and 
# runs them through the Yahoo Compression utility 
# and then uploads the entire site to your web server via SCP. 


# Configure your settings below and be sure to supply the proper path 
# to the Yahoo compressor. Set the COMPRESS flag to false to skip compression 


COMPRESS = true 

WORKING DIR = "working" 
REMOTE_USER = "homer" 
REMOTE_HOST = "“yourfoodbox.com" 
REMOTE_PORT = 22 


REMOTE_DIR = "/home/#{REMOTE_USER}/your foodbox.com/" 


FILES = ["tndex. html", 
"htaccess", 
"global_append.php", 
"global_prepend. php", 
"favicon.ico", 
"stylesheets" 
"images" 


] 


COMPRESSOR_CMD = ‘Java -jar bin/yuicompressor-2.4.2.jar' 
# DONE CONFIGURING 


require ‘rubygems' 
require ‘net/scp' 
require 'fileutils' 


@errors = [] 


FileUtils.rm_rf WORKING DIR 
FileUtils.mkdir WORKING DIR 
FILES.each do |f| 
if File.directory? (Cf) 
FileUtils.cp_r f, WORKING DIR 
else 
FileUtils.cp f, WORKING DIR 


®© 用 sudo gem install net-scp 命令 来 安装 net-scp。 
© gem 和 是 一 种 包 管 理 格式 ， 作 用 是 让 RubyGems 为 Ruby 语言 提供 库 。 一 一 译 者 注 
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end 
end 


# Upload files in our working directory to the server 
def upload(files) 
Net: :SCP.startCREMOTE_HOST, REMOTE_USER, :port => REMOTE_PORT) do |scp| 
files.each do |file| 
puts "uploading #{file}" 
if File.directory?(fi le) 
scp.upload! "working/#{file}", REMOTE_DIR, :recursive => true 
else 
scp.upload! "working/#{file}", REMOTE_DIR 
end 
end 
end 
end 


# Minify all CSS and JS files found within the working 
# directory 
def minify(working_dir) 

files = Dir.globC"#{working_dir}/**/*.f{css, js}") 


files.each do |file| 
type = File.extname(file) == ".css" ? "css" : "js" 
newfile = file.gsub(".#{type}", ".new.#{type}”) 
puts "minifying #{file}” 
“#{COMPRESSOR_CMD} --type #{type} #{file} > #{newfile}" 


if File.sizeC(newfile) > 0 

FileUtils.cp newfile, file 
else 

@errors << "Unable to process #{file}." 
end 


end 
end 


minify (WORKING DIR) if COMPRESS 


if @errors.length == 
puts "Deploying" 
up load(FILES) 
else 
puts "Unable to deploy.” 
@errors.each{|e| puts e} 
end 


你 还 可 以 改造 这 些 代码 ， 比 如 说 加 一 个 功能 ， 把 所 有 的 CSS 文件 合并 成 一 个 新 文件 ， 这 样 
你 就 能 把 HTML 中 调用 CSS 的 链接 减少 到 只 有 一 个 ， 并 只 调用 新 的 链接 。 这 样 在 压缩 时 就 只 
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一 个 文件 会 被 压缩 ， 而 且 会 


20.4 图 片 优 化 


在 第 10 草 中 , 你 已 经 学 会 了 用 Photoshop 来 优化 图 片 。 除 此 之 外 ， 其实 还 可 以 进一步 优化 图 
片 。 比 如 像 雅 虎 的 Smush-It! 服 务 就 会 利用 几 个 开源 工具 帮 你 优化 图 片 ， 然 后 YSlow 插件 可 以 将 


减少 客户 端 对 服务 喜 发 出 的 请 求 数目 。 


页 面 里 的 图 像 文 件 发 送 到 这 个 服务 器 去 优化 。 我 在 Smush-It! 里 运行 Foodbox， 在 图 20-2 里 可 以 
看 到 结果 。 
Smush.it™ 


Smushed or from the size of 


your image(s). How did we do it? See the table below 
for more details. 





Smushed images 


报告 显示 ，Smush-It! 可 以 将 图 片 缩小 13%, 
过 为 我 们 广 省 了 大 约 2KB 的 空 
件 ， 这 意味 着 如 条 在 页 面 上 使 用 了 这 些 文件 ， 那 么 需 


况 下 ， 我 还 是 希望 这 些 东 西 保持 原样 。 


目 己 动手 


Image 
background.gif 
browse_recipes.gif.png 
get_cookin.gif.png 
banner.png 
btn_signup.png 
search.png 





Result size Savings 


830 bytes 56 bytes 
1.05 KB 42 bytes 
6.96 KB 1.55 KB 
2.33 KB 40 bytes 


466 bytes 113 bytes 


% Savings 


图 20-2 ”Smush-It! 将 图 片 压 缩 了 13% 的 体积 ， 差 不 多 比 2KB 稍微 小 一 点 


间 。 更 糟糕 的 征 ， 这 


乍 听 起 来 ， 
文 个 ieee 


个 成 绩 还 不 错 。 再 想 一 


想 9 这 只 不 


要 将 一 些 GIF 文件 转换 为 PNG X 


修改 样式 表 和 标记 文件 。 但 十 在 目前 的 情 


Smush-It 使 用 了 Pngcrush 作为 优化 PNG 的 工具 , 然后 用 ImageMagick ”来 确定 图 片 格式 , 并 
把 GIF 转化 为 PNG， 最 后 用 JPEGTran 来 去 掉 JPEG 文件 里 的 meta 信息 。 


我 会 用 get cookin.gif 来 做 个 小 实验 


© http://pmt.sourceforge.net/pngcrush/, 


© http://www.imagemagick.org/script/index.php , 


© http://sylvana.net/jpegcrop/jpegtran/ , 


将 它 转换 为 PNG， 用 Pngcrush 优化 一 下 : 
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convert get_cookin.gif tmp .png 
pngcrush -rem alla -reduce --brute tmp.png get_cookin.png 


比较 两 个 文件 后 发 现 ， 它 们 的 体积 几乎 是 一 样 的 。 所 以 在 这 个 例子 里 ， 这 些 多 出 来 的 步骤 几 
平 设 有 必要 ， 用 Photoshop 压缩 已 经 足够 了 。 


但 是 ， 如 来 换 成 注册 按钮 : 
pngcrush -rem alla -reduce --brute btn_signup.png btn_signup2.png 


体积 从 原来 的 2.4 KB 降 到 了 2.3 KB， 虽 然 体 积 有 了 些许 变化 ， 但 古 效 末 也 不 是 很 明显 。 





所 以 在 这 个 例子 中 ,进一步 优化 图 像 并 不 是 非常 必要 ,但 是 在 建造 你 目 己 网 站 的 时 候 ， 这 一 
点 还 是 需要 芳 虑 的 。 如 末 它 对 你 有 利 ， 那 么 记 住 要 在 目 动 部 普 的 代码 里 加 上 这 一 段 。 


20.5 “小 结 


在 实现 了 本 草 讨 论 的 技巧 之 后 ,用户 会 在 第 一 次 访问 网 站 之 后 感觉 到 很 大 的 速度 提升 (参见 
图 20-3)。 这 里 只 是 粗略 地 描绘 了 一 下 性 能 优化 的 图 景 ， 你 也 应 该 对 相关 的 知识 有 了 比较 识 入 的 
了 解 ， 当 你 在 这 方面 过 到 困难 的 时 候 ， 应 该 知道 往 什 么 方 问 努力。 对 ETag、 压 缩 、 减 小 体积 和 
expires 报头 的 恰当 设置 可 以 很 好 地 帮助 你 减少 请 求 数量 ， 从 而 大 大 区 省 市 宽 使 用 量 。 


StatisticS The page has a total of 14 HTTP requests and a total weight of 61.0K bytes with empty cache 
WEIGHT GRAPHS 
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图 20-3 ”经 过 优化 之 后 ， 反 复 返 回访 问 网 站 的 用 户 不 会 多 次 请 求 服务 器 


_ ip 
后 续 工 作 


建造 Foodbox 的 工作 已 经 完成 ,现在 你 可 能 正果 着 它 寻 思 : 接 下 来 还 能 做 什么 呢 ? KEEN: 
如 采 以 后 我 要 做 点 儿 不 一 样 的 东西 ， 应 该 怎么 办 ? 本 草 会 介绍 一 些 方法 ， 你 可 以 研究 一 下 ， 这 对 
你 以 后 的 开发 或 许 会 有 好 处 。 


21.1 其 他 页 面 和 模板 


我 们 用 了 一 整 本 书 来 讲 设 计 一 个 网 站 , 但 实际 上 只 完成 了 一 个 页 面 。 通 稼 一 个 网 站 上 只 有 一 个 
页 面 是 不 够 的 ， 同 时 其 他 的 页 面 跟 首 页 应 该 是 不 同 的 。 





二 级 页 面 

一 个 网 站 有 两 套 设计 是 很 稍 见 的 , 通 稼 首页 的 设计 是 一 套 ， 然 后 其 他 的 次 级 页 面 共 用 另外 一 
套 的 风格 。 这 套 设计 跟 首 页 的 设计 非 贡 类似， 但 一 般 Banner By), SAIN AERA Eck, KE 
二 级 页 面 模板 通 和 是 用 来 组 织 内 容 的 。 下 面 会 用 很 快 的 速度 创建 一 个 二 级 模板 ， 并 加 以 使 用 。 

1. 创建 二 级 页 面 模板 

复制 index.html 文件 到 一 个 名 叫 level2.html 的 新 文件 ， 定 位 到 下 面 的 这 个 标签 ， 并 删除 其 中 
的 所 有 内 容 : 

<div id="middle"> 

wavs 
然后 将 内 容 蔡 换 为 : 

final/level2.html 

<div id="middle"> 


<div id="leftcol"> 
</div> 
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<div id="rightcol"> 
</div> 


</div> <!-- end of middle container --> 
然后 需要 将 class="1eve12" 应 用 到 body 标签 上 。 可 以 利用 这 个 新 的 类 ， 将 CSS 选择 器 的 
沁 围 限定 到 二 级 页 面 模 板 上 。 


在 布局 上 将 页 头 缩小 到 54 像素 高 ， 然 后 用 到 之 前 学 过 的 Float 技巧 来 布局 双 栏 排版 : 
final/stylesheets/layout.css 


.level2 #header{height:54px; } 
#middle {width: 100%; } 
#leftcol, #rightcol{ 
margin:18px; 
Float: left; 
display: inline; 
} 
#leftcol{width:558px;} 
#rightcol{width:270px; } 


因为 缩小 了 页 头 ， 所 以 需要 新 的 Logo 和 背景 图 片 。 这 个 步骤 可 以 用 Photoshop 来 完成 ， 但 
是 如 果 用 ImageMagick 会 更 快 。 打 开 终 端 窗口 或 者 是 命令 行 提示 ， 进 入 图 片 目录 。 
将 新 Banner 改 为 36 像素 高 : 


convert -geometry x36 banner.png banner_small.png 


在 level2.html 模板 中 将 Banner.png 改 成 Banner small.png, 


因为 页 头 是 54 像素 高 ， 所 以 背景 图 片 应 该 也 是 这 个 高 度 。 可 以 用 ImageMagick 的 crop (34 
切 ) 命令 ; 

convert -crop 1x54+0+0 background.gif background_level2.gif 

crop 命令 的 几 个 参数 分 别 是 图 像 的 宽 、 高 和 起 始 坐标 。 0+0 ”规定 了 剪 切 从 图 上 的 最 左上 
角 开 始 。 

为 了 给 页 面 加 上 样式 ， 需 要 修改 中 间 区 域 的 背景 颜色 和 背景 图 片 : 


final/stylesheets/style.css 


.level2 #middle{background-color:#fff8e4 } 
body. level2 {background: #fff url(C'../images/background_level2.gif') repeat-x; 
} 


你 看 ， 其 实 创建 一 个 模板 只 需要 这 么 几 个 简单 的 步 又 。 


© 可 以 在 http://www.imagemagick.org/script/index.php 下 载 InageMagick。 如 果 你 是 Mac 用 户 ， 可 以 通过 MacPorts 
来 安装 它 ， 如 有 果 你 是 Linux 用 户 ， 包 管理 程序 中 可 能 会 包括 它 。 
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2. 用 模板 打造 一 个 登录 页 面 


你 可 以 用 level2.html 模板 创建 登录 页 面 。 将 刚刚 完成 的 level2.html 复制 到 一 个 叫做 login. 
html 的 新 文件 ， 在 login.html 中 加 上 如 下 代码 : 


final/login.html 


<div id="leftcol"> 
<h2>Log in</h2> 


<form id="login" method="post" action="/user_sessions"> 
<table> 
<tr> 
<th><label for="username">Username</label></th> 
<td> 
<input type="text” name="username" 
id="username" class="text"> 
</td> 
</tr> 
<tr> 
<th><label for="password">Password</label></th> 
<td> 
<input type="password" name="password" 
1d="password" class= passworad > 
</td> 
</tr> 
<tr> 
<th>&nbsp;</th> 
<td> 
<input type="checkbox" name="remember" id=""remember" class="checkbox"> 
<label for="remember">Remember me</label></td> 
</th> 
</tr> 
<tr> 
<th>&nbsp; </th> 
<td><input type="submit" value="Log in"></td> 
</tr> 
</table> 
</form> 
</div> 
<div id="rightcol"> 


<h2>Already have an account?</h2> 
<a href="/signup/"> 
<img src="images/btn_signup.png" alt="Sign up"> 
</a> 
</div> 


你 还 需要 在 layout.css 中 加 入 如 下 代码 : 
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final/stylesheets/layout.css 


form {margin-left:36px; } 
form table{border: 0px; } 
form table tr{height:36px;} 


完成 以 上 步骤 之 后 ， 页 面 应 该 看 起 来 跟 图 21-1 差不多 。 





Log in Already have an account? 


Username za 7 AA y 
Password 
Cl Remember me 


{ Log in ) 


图 21-1 用 二 级 页 面 模板 打造 的 简单 登录 页 面 














前 为 止 , 我们 进行 得 很 顺利 , 但 是 这 个 工作 尝 的 扩展 性 对 于 那些 有 上 百 个 页 面 的 网 站 来 说 


E 
是 远 远 不 够 的 。 
21.2 ”高 级 模板 


如 来 不 断 地 用 复制 模板 的 方式 来 新 建 页 面 ， BBA PR_E SEA A AEP HY He, EPR TE CSS 里 
面 可 以 处 理 所 有 的 颜色 , 但 是 如 条 过 到 要 修改 页 脚 里 链接 的 情况 ,你 该 怎么 办 ? 如 采用 这 种 复制 
粘贴 的 方式 做 了 20 个 网 页 ， 那么 你 就 需要 手动 省 理 这 20 个 页 面 里 面 的 链接 和 内 容 。 如 来 你 打算 
维护 一 个 有 层级 的 链接 ， 那 么 那些 连接 到 外 部 文档 的 链接 会 变 得 更 难 管理 。 


如 有 果 你 打算 开发 一 个 静态 网 站 , 那么 可 以 用 Dreamweaver 来 跟踪 模板 。 把 页 面 同 某 个 模板 关 
联 起 来 ， 如 东 改 动 模板 里 的 某 个 链接 ，Dreamweaver 会 目 动 帮 你 更 新 与 之 关联 的 页 面 。 如 于 你 
ColdFusion 或 是 PHP，Dreamweaver 会 是 一 个 很 棒 的 工具 ,因为 它 能 日 动 妃 踪 页 面 上 的 链接 和 
图 片 。 如 果 把 一 个 页 面 移动 到 另外 一 个 文件 夹 里 ，Dreamweaver 会 自动 帮 你 更 新 页 面 里 样式 表 、 
图 片 和 其 他 所 有 文件 的 相对 链接 。 但 是 这 个 工具 的 价格 偏 高 ,而且 有 些 时 候 会 显得 功能 元 余 。 
此 ，Dreamweaver 并 不 是 维护 静态 网 站 的 唯一 选择 。 


StaticMatic "和 Nanoc 是 两 个 人 简单 且 灵 活 的 静态 网 站 管理 工具 。 这 两 个 工具 都 是 用 Ruby 写 


®© http://staticmatic.rubyforge.org, 
®© http://nanoc.stoneship.org/。 
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的 ， 用 起 来 非常 简单 ， 都 有 详尽 的 文档 ， 而 且 它 们 最 大 的 优 点 是 一 一 免费 。 


现在 ,大 多 数 网 站 都 不 是 静态 的 。 但 把 模板 转换 成 某 种 框架 或 者 某 种 语言 的 可 用 有 版本， 应 该 
也 不 是 什么 难事 ， 你 可 以 用 PHP、ColdFusion、Ruby on Rails, Django, Perl, .NET 或 者 其 他 任 
何 基 于 Web 的 框架 来 做 这 件 事 情 。 


多 数 现代 Web 框架 都 有 内 建 的 模板 机 制 ， 所 以 将 设计 转换 成 模板 不 难 ， 难 的 是 怎么 设计 。 
21.3 ”网 格 系统 和 CSS 框架 


在 本 书 中 ， 我 有 意 没 有 引导 你 使 用 那些 流行 的 CSS 框架 ， 因 为 我 希望 你 可 以 创建 自己 的 网 
格 。 但 是 现 在 你 已 经 知道 网 格 系统 是 怎么 一 回 事 了 ， 那 么 可 以 去 看 看 一 些 开 源 的 布局 框架 了 。 





21.3.1 YUI 网 格 


YUI (Yahoo! User Interface Libray， 雅 虎 用 户 界 面 库 ) 内 置 了 一 个 网 格 建 造 器 ,叫做 YUI 网 格 ”， 
这 个 建造 右 让 创建 网 格 变 得 易 如 反 和 擎 。 用 它 生 成 的 一 个 简单 的 Foodbox 模板 看 起 来 是 这 样 的 : 


final/yui_foodbox.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/htm]l4/strict.dtd"> 
<html> 
<head> 
<title>YUI Base Page</title> 
<link rel="stylesheet" 
href="http://yu1.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" 
type="text/css"> 
</head> 
<body> 
<div id="doc2" class="yu1-t3"> 
<div id="hd" role="banner"><h1>Foodbox</h1></div> 
<div id="bd" role="main"> 
<div id="yui-main"> 
<div class="yu1-b"><div role="main" class= yui-g > 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. 
</p> 
</div> 


© http://developer.yahoo.com/yui/grids/builder/ , 
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</div> 
</div> 
<div role="search" class="yui-b"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. 
</p> 
<p> 
Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p> 
</div> 


</div> 
<div id="ft" role="contentinfo"><p>Copyright 2010 Foodbox</p></div> 
</div> 
</body> 
</html> 


ea 1 面 添加 样式 ， 只 需要 在 框架 内 写 代 码 就 好 了 。 只 要 用 对 了 id 和 
class， 整 个 过 程 会 很 顺利 。 在 上 面 那个 例子 里 面 ， 最 外 层 的 div 指定 了 960 像素 宽 ， 它 的 id 
是 doc2。 另 外 yui-t3 这 个 类 规定 了 左 栏 的 宽 是 300 像素 。 这 个 工具 有 很 多 的 设置 项 ， 具 体 请 看 
相关 文档 。” 

上 面 例子 中 的 版 本 还 重 置 了 所 有 元 素 的 格式 (参见 图 21-2) ， 你 可 以 看 到 Foodbox 的 标题 也 
变 得 非常 的 小 。 在 应 用 了 YUI 之 后 ， 你 需要 再 添加 自己 的 样式 表 ， 为 标题 类 元 素 加 上 样式 。 


Foodbox 

Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
elit, sed do eiusmod tempor incididunt ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 

dolore magna aliqua. Ut enim ad minim veniam, commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
quis nostrud exercitation ullamco laboris nisi ut pariatur. 

aliquip ex ea commodo consequat. Duis aute irure 

dolor in reprehenderit in voluptate velit esse cillum 

dolore eu fugiat nulla pariatur. 

Excepteur sint occaecat cupidatat non proident, 

sunt in culpa qui officia deserunt mollit anim id est 

laborum. 

Copyright 2009 Foodbox 


21-2 Foodbox 的 YUI 网 格 布局 ， 没 有 加 任何 装饰 
21.3.2 960 网 格 系统 
广 受 欢迎 的 960 网 格 系 统 是 YUI 之 外 的 男 一 个 选择 。 这 个 系统 将 页 面 预 置 成 960 像素 宽 ， 


®© http://developer.yahoo.com/yui/grids/ , 
@ http://960.gs/, 
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并 将 之 分 成 12 列 或 者 16 列 。 当 你 以 此 为 基础 打造 页 面 布 局 的 时 候 ， 系 统 会 让 你 用 Class 来 确定 
每 个 区 域 需 要 占 儿 列 。 


MRH T 12 列 的 网 格 ， 那 么 你 需要 将 页 头 和 页 脚 设 置 为 12 列 宽 ， 侧 边栏 的 宽度 为 4 列 ， 这 
样 主 区 域 的 宽度 就 是 8 列 了 。 列 与 列 之 间 的 则 隔 就 不 用 考虑 了 ，960 网 格 系统 会 帮 你 目 动 配置 好 。 


代码 如 下 : 


final/960_foodbox.html 





<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>960 Grid System &mdash; Demo</title> 

<link rel="stylesheet" href="http://960.gs/css/reset.css" /> 

<link rel="stylesheet" href="http://960.gs/css/text.css" /> 

<link rel="stylesheet" href="http://960.gs/css/960.css" /> 

</head> 

<body> 


<div class="container_12"> 


<div id="header" class="grid_12"> 
<h1>Foodbox</h1> 
</div> 


<div id="sidebar" class="grid_4"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. 
</p> 
<p>Excepteur sint occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit anim id est laborum. 
</p> 


</div> 


<div id="main" class="grid_8"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
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pariatur. 
</p> 
<p>Excepteur sint occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit anim id est laborum. 


</p> 
</div> 


<div id="footer" class="grid_12"> 
<p>Copyright &copy; 2010 Foodbox</p> 
</div> 


</div> 
</body> 
这 个 网 格 可 以 帮 你 用 几 行 代码 就 搭建 好 一 个 简单 的 布局 (参见 图 21-3), 960 网 格 系统 使 用 
了 13 像素 的 字体 和 1.5 的 行 高 一 一 这 里 的 1.5 是 相对 值 ， 指 的 是 行 高 为 字体 的 1.5 倍 。 因 此 现在 
行 高 束 是 19.5 像素 ,这 对 前 切 图 片 造 成 了 困难 ， 所 以 你 可 能 需要 在 自己 的 样式 表 里 面 改动 字体 大 小 











Foodbox 

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et 
adipisicing elit sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ut labore et dolore magna aliqua. Ut enim ad minim ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
veniam, quis nostrud exercitation ullamco laboris fugiat nulla pariatur. 

nisi ut aliquip ex ea commodo consequat. Duis 

aute irure dolor in reprehenderit in voluptate velit Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 

esse cillum dolore eu fugiat nulla pariatur. laborum. 


Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est 
laborum. 


Copyright © 2009 Foodbox 
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如 林 你 想 把 960 网 格 系统 融 合 到 目 己 的 工作 流 里 去 , 可 以 上 它 的 网 站 下 载 一 份 可 以 打印 的 文 
档 ，Photoshop 模板 对 你 设计 目 己 的 网 站 也 很 有 帮助 。 


21.3.3 ”框架 不 是 万 能 的 


虽然 这 些 框架 让 基于 网 格 的 布局 设计 变 得 简单 异常 , 但 是 擎 担 一 些 关 于 基线 网 格 的 知识 仍然 
征 有 必要 的 ， 特 别 征 当 你 选择 字体 、 字 号 和 放置 图 片 的 时 候 ， 这 些 知 识 会 很 有 有用。 另外， 这些 系 
统 通常 都 包含 很 多 你 并 不 需要 的 CSS 代码 。960 网 格 系统 还 需要 你 关联 很 多 文件 ， 这 可 能 会 降低 
隆 能 。 如 采 你 难 备 使 用 这 些 框 如 ， 一 定 要 处 理 好 压缩 文件 体积 和 缓存 技术 。 


完全 了 解 其 原理 ， 然 后 再 使 用 它们 ， 这 样 你 才能 从 CSS 框架 中 获 益 。 





21.4 替换 CSS < 239 


21.4 Fk CSS 


作为 程序 员 ， 跟 CSS 打交道 可 能 会 比较 头疼 ， 也 许 还 会 显得 有 点 儿 多 余 。CSS 并 没有 变量 
和 继承 的 概念 ， 所 以 你 到 了 最 后 可 能 需要 把 同一 段 代码 写 很 多 过。 
下 面 这 段 代 码 带 来 的 将 是 维护 填 攀 : 
#latest_recipes{ 
clear:both; 


margin: 18px 18px 0 18px; 
l; 


#latest_recipes h3{ 
margin-left:18px; 
} 


#latest_recipes p{ 
margin-left:36px; 
f 


X Tihema EH latest_recipes， 这 看 起 来 就 不 大 对 。 

现在 有 一 些 开 源 的 项 目 制 作 了 一 些 CSS 生成 器 ， 它 们 自己 有 一 套 标 记 语 言 ， 用 这 些 标记 语言 
写 完 代码 以 后 ， 生 成 器 会 将 之 转换 为 静态 的 CSS 文件 ， 然 后 就 可 以 在 应 用 中 使 用 这 些 CSS 了 。 接 
下 来 我 会 介绍 Less， 它 是 一 个 简单 但 却 强大 的 CSS 预 处 理 器 ， 它 背后 的 实现 语言 是 Ruby。” 








Less CSS 


通过 Ruby, Less 可 以 完全 发 挥 你 的 CSS 水 平 ， 很 轻松 地 写 出 CSS 样式 表 。 
通过 Less， 可 以 将 上 面 那些 代码 有 逻辑 地 整理 成 下 面 这 样 : 


final/less_examples.less 


#latest_recipes{ 
clear:both; 
margin: 18px 18px 0 18px; 


h3{ 
margin-left:18px; 
} 


pt 
D Ab, Sass 可 能 也 会 唤起 你 的 兴趣 ，Sass 与 Less 类 似 ， 但 语法 略 难 一 些 。 你 可 以 在 http://sass-lang.com/ 了解 更 多 


Sass 的 知识 。 
®© http://lesscss.org/, 


240 > 第 21 章 后 续 工作 
margin-left:36px; 


} 
} 


这 个 文件 被 转化 为 CSS 文件 时 ，h3 以 及 p 标签 选择 合 的 范围 会 被 目 动 配 好 。 
Less 的 真正 强大 之 处 则 在 于 对 变量 和 表达 式 的 支持 。 这 种 支持 可 以 让 你 写 出 下 面 这 种 代码 : 








final/less_examples.less 


@text_color: #fff; 

@width: 900px; 

@font_size: 12px; 

@line_height: @font_size *« 1.5; 
@margin: @line_height; 

@sidebar: @width / 3; 

@main: @width - @sidebar - @margin; 


body {color: @text_color; } 

#page { width: @width; margin: O auto; } 
#middle { width: @width; } 

#main { width: @main; } 

#sidebar { width: @sidebar; } 


虽然 浏览 龙 并 不 理解 这 种 形式 的 样式 表 ， 但 征 通过 Less PALE as AJANTA, PRE 
之 变 成 标准 的 CSS 文件 : 

less source/style.less stylesheets/style.css --watch 

--watch 命令 监听 对 源 文件 的 改动 ， 当 你 保存 这 些 文件 的 时 候 ，Less 会 目 动 生成 CSS 文件 。 
这 不 仅 让 测试 变 得 异 第 轻松 , 还 会 大 大 简化 样式 表 的 管理 。 男 外 ,你 还 可 以 轻松 地 把 这 个 过 程 融 
合 到 上 日 动 化 部 署 的 过 程 中 去 。 


21.5 ”不 要 忘记 为 有 版 权 的 照片 付 钱 


在 本 书 里 用 到 的 那个 意大利 面 的 Logo 来 自 于 iStockphoto ,在 书 中 的 例子 里 面 用 的 都 是 带 水 
印 的 版 本 。 但 是 ， 如 条 网 站 要 上 线 ， 那 就 必须 去 买 最 终 版 本 ”。 这 个 听 起 来 应 该 属于 常识 性 的 东 
Pa, 但 是 如 果 你 去 Photoshop Distasters 这 个 博客 看 一 看 就 知道 , 很 多 人 在 发 布 网 站 的 时 候 使 用 的 
古市 水 印 的 图 片 一 一 其 至 有 人 出 版 印刷 品 的 时 候 也 是 这 样 ! 所 以 , 千 万 不 要 扎 记 为 那些 市 版 权 的 
照片 (或 是 其 他 任何 你 使 用 了 的 资源 ) 付费 。 另 外 要 记 住 ， 不 要 因为 一 张 图 片 在 Google Image 
中 出 现 了 ， 就 以 为 你 可 以 免费 使 用 它 。 





®© http://www.istockphoto.com, 
@ 为 了 将 之 用 作 本 书 的 例子 ， 我 已 经 购买 了 一 次 ， 所 以 在 完成 那些 例子 的 时 候 ， 你 可 以 使 用 这 个 图 卢 。 
© http://www.photoshopdisasters.com/ , 
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以 前 ， 那 些 谈 入 谈 出 之 类 的 动画 必须 使 用 Flash 才 可 以 实现 。 但 古 现 在 ,很 多 类 似 的 效果 都 
可 以 借用 像 jQuery, Prototype 和 Scriptaculous 这 样 的 JavaScript 库 来 实现 。 这 些 开 产 的 JavaScript 
框架 旨 在 简化 对 HTML 元 素 的 控制 、 动 画 效果 的 制作 和 Ajax 的 实现 。 现 在 就 用 jQuery 来 为 页 面 
上 的 意大利 面 的 图 片 加 入 一 个 谈 入 淡出 效 朱 吧 。 


首先 需要 找 一 些 大 小 合适 的 图 片 来 实现 这 个 效 朱 。 这 些 图 片 应 该 有 594 像素 宽 、144 像素 高 ， 
这 样 才能 放 到 页 面 的 那个 区 域 里 去 。 我 打算 使 用 三 张 Flickr 上 的 图 片 ， 它们 的 版 权 许可 都 是 
“Creative Commons Attribution” “一 一 这 意味 这 在 使 用 照片 的 时 候 需 要 注 明 原作 者 。 我 选中 了 这 
样 的 三 张 图 片 : 

Q http:/www.flickr.com/photos/pencapchew/3108612635/ 

Q http://www.flickr.com/photos/stevendepolo/3523644703/ 

Q http://www.flickr.com/photos/denniswong/3486409564/ 


21.6.1 缩放 图 片 


图 片 需要 被 缩放 到 594 像素 宽 ， 这 样 它 们 融 能 像 意 大 利 面 的 图 片 一 样 放 进 那 一 块 区 域 了 。 
ImageMagick 的 Geometry 选项 能 在 只 提供 图 片 宽 参数 的 情况 下 ， 保 持 图 片 不 变形 (这 段 代 码 限 
制 了 宽度 和 高 度 的 比例 ): 


$ convert -geometry 594x originals/tacosalad.jpg tacosalad.jpg 
$ convert -geometry 594x originals/phadthai.jpg phadthai.jpg 
$ convert -geometry 594x originals/chickenmac.jpg chickenmac.jpg 


TRR Zee AT Bet EPRS PRB Ay. aca A BY re J 


$ identify tacosalad.jpg 
tacosalad.jpg JPEG 594x394 594x394+0+0 8-bit DirectClass 146kb 


从 数据 中 来 看 ， 图 片 高 度 古 394 像素 ， 用 这 个 高 度 减 去 144 然后 除 以 2。 最 后 算出 来 需要 开 
始 从 9 像素 x 125 像素 的 地 方 开始 裁剪 : 


$ convert -crop 594x144+0+125 tacosalad.jpg tacosalad.jpg 
$ convert -crop 594x144+04+125 phadthai.jpg phadthai.jpg 
$ convert -crop 594x144+04+125 chickenmac.jpg chickenmac.jpg 


21.6.2 BK 
为 了 实现 淡 入 淡出 的 效果 ， 需 要 在 载 入 下 一 张 图 片 的 时 候 让 当前 的 图 片 消失 。Flash 这 类 软 




















O 这 征 一 种 版 权 协议 ， 允 许 对 作品 进行 复制 、 分 发 、 改 造 和 合成 ， 但 是 要 在 使 用 的 时 候 往 明 原 作者 。 一 一 译 者 广 
@ 如 果 图 片 已 经 无 法 访问 ， 那 么 请 从 本 书 附带 的 源 代码 中 获取 。 
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件 用 时 间 轴 来 控制 效果 。 每 个 图 片 都 有 自己 的 图 层 ， 然 后 等 到 要 淡 入 的 时 候 ， 就 将 两 个 图 层 在 时 
间 轴 上 交 释 。JavaScript 没 有 时 间 轴 ， 但 它 也 为 我 们 提供 了 做 出 这 种 效果 的 方法 。 

从 图 片 数组 开始 。 就 本 例 而 言 ， 我 们 尽量 简化 问题 ， 不 修改 淡 入 淡出 中 的 默认 文本 。 


final/javascripts/crossfade.js 





images = [ 
"Tmages/pasta.jpg'', 
"Tmages/tacosalad.jpg", 
"Tmages/phadthal.jpg' , 
"Tmages/chickenmac. jpg" 


] 
这 个 数组 里 图 片 的 顺序 是 很 重要 的 ， 这 决定 了 图 片 将 以 什么 样 的 顺序 出 现 。 

然后 需要 将 它 放 到 页 面 中 , 一 张 一 张 地 摆 起 来 。 束 个 谈 入 谈 出 的 代码 会 让 最 上 面 的 那个 图 斤 
TERRA, 显露 出 第 二 张 图 片 。 然 后 每 5 秒 重复 一 次 ， 当 到 达 最 后 一 张 图 片 的 时 候 ， 程序 会 把 状 
态 重 置 。 

我 们 会 用 CSS 和 JavaScript 在 Banner 里 把 图 片 操 起 来 : 


final/javascripts/crossfade.js 


Linel var image_box = $C"#main_iImage"); 
2 
3  Image_box.css({ ‘position’ : ‘relative’, ‘height': '144px'} ); 
4 var image_html = ""; 
5 for(var i = 0; 1 < images.length; i++) { 
6 image_html += ‘<img style="position:absolute;top:0; z-index:' + 
7 (images.length - 1) + '" src="' + images[i] + '" 1d="image_' + i + '"/>'; 
“ Fi 
9 


OO 


image_box.html Cimage_htm1) ; 

代码 一 开始 就 获取 了 图 片 的 容 絮 元 素 ， 然 后 用 JavaScript 将 这 个 容 絮 的 position 设置 为 
relative, 并 给 它 赋 值 一 个 具体 的 高 度 , 以 防止 它 场 陷 而 不 能 显示 任何 图 片 。 接 下 来 新 建 了 一 个 
字符 串 ， 用 来 存储 图 片 的 HTML 代码 ， 然 后 遍历 所 有 的 图 片 为 它们 创建 HTML 代码 。 在 这 里 面 
又 用 到 了 绝对 定位 来 让 图 片 跟 容 右 的 左上 角 对 齐 ， 并 且 用 到 了 CSS 里 的 top, left 和 z-index 
属性 。 这 里 用 的 都 是 内 联 样式 ， top 和 left 属性 的 值 都 是 0，z-index 则 是 摆 起 图 片 的 顺序 ， 
它 的 值 就 是 图 片 数组 的 案 引 值 ， 这 样 图 片 就 一 个 登 一 个 地 摆 起 来 了 。 


每 个 图 斤 痢 有 目 己 的 id, fre image_i, i 是 图 片 在 数组 里 的 索 5| 值 。 这 个 id 我 们 在 一 











© 之 前 我 说 过 内 联 样式 是 不 好 的 做 法 ,但 是 现在 这 种 样式 又 是 必需 的 ， 虽然 像 postion, left, top 这 种 属性 可 以 
在 CSS 中 完成 设置 并 赋予 图 片 的 公共 类 ， 但 是 z-index 这 个 值 定 每 个 图 片 都 不 一 样 的。 所 以 在 这 里 我 用 了 内 联 
样式 .。 


21.6 视觉 效果 A 243 


会 儿 指 定 图 片 谈 出 的 时 候 就 会 用 到 。 
把 图 片 的 HTML 写 好 之 后 , 就 可 以 用 容 絮 的 html 0) 方法 来 把 它 写 进去 〈 参 见 代 码 第 10 行 )。 


需要 初始 化 一 个 counter 变量 来 跟踪 图 片 栈 里 的 图 片 , 另外 图 片 过 渡 每 5 秒 进行 一 次 , 所 以 
要 用 到 setIntervalQO 方 法 ， 这 个 方法 可 以 在 给 定 间 隔 内 调用 一 个 方法 。 


final/javascripts/crossfade.js 


line] var 1 = 0; 
2 var delay_in_miliseconds = 5000; 
3 
4 setiInterval (function() { 
5 $C "#image_" + 1).animate({ opacity: 0}, 3000); 
6 i++; 
7 if(i == images.length) i = 0; 
8 $C "#image_" + 1).animate({ opacity: 1}, 3000); 


9 }$,delay_in_miliseconds) ; 
第 4 行 里 , 向 setIntervalO WAH STEAL. KS MRA Beas (counter 变量 ) 
来 判定 需要 淡出 的 图 片 ， 然 后 counter 变量 自 增 1， 这 样 就 得 到 了 要 显示 的 下 一 张 图 片 。 但 是 在 
激活 下 一 张 图 片 之 前 ， 先 要 检查 索引 是 不 是 超过 了 图 片 的 总 数 ， 如果 是 , 将 counter 变量 重 置 为 
0。 了 最终 ， 就 像 洗 牌 一 样 ， 一 张 张 地 显示 图 片 ， 一 张 张 地 淡出 。 








一 个 相对 区 域 里 的 绝对 定位 


通常 在 你 使 用 坐标 定位 某 个 元 素 的 时 候 ， 该 元 素 的 坐标 是 相对 于 浏览 器 窗口 左上 角 的 。 
所 以 ， 如 果 你 想 让 某 个 元 素 出 现在 浏览 器 左上 角 往 下 100 像素 往 左 18 像素 的 地 方 ， 应 该 这 
样 写 
.box{ 
position:absolute; 
top: 1l00px; 
left:18px; 
} 
但 是 如 果 把 某 个 元 素 的 position 设置 为 relative, 该 元 素 就 成 了 绝对 定位 其 子 元 素 的 
和 参照 元 素 。 这 样 ， 打造 图 片 栈 的 过 程 就 容易 了 很 多 ,只 需要 将 相对 于 图 片 容器 左边 的 距离 都 


设 为 0 就 可 以 了 ， 


21.6.3 把 动画 放 到 主页 上 


只 有 调用 了 上 面 那 段 代 码 ， 谈 入 谈 出 脚本 才 会 起 作用 。 因 此 需要 在 主页 上 ?| 入 jQuery 库 和 
脚本 。 
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打开 首页 代码 ， 在 body 标签 关闭 之 前 加 上 下 面 的 代码 : 


final/index.html 


<script type="text/javascript” 
charset="utf-8" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jJquery.min.js"'> 
</script> 


<script type="text/javascript” charset="utf-8" 
src="Javascripts/crossfade.js"> 
</script> 


这 两 段 代码 加 载 了 jQuery HARA DHS. RILATE, AE aretan URL 来 
缓存 文件 的 ， 那 么 通过 在 页 面 上 加 载 来 自 同一 个 源 的 通用 库 〈 比 如 说 jQuery)， 应 该 可 以 提升 页 
面 的 性 能 。 因 为 如 果 用 户 从 另外 一 个 网 站 跳 到 网 站 ， 而 我 们 都 用 了 同一 个 源 ， 那么 有 些 库 可 能 就 
已 经 被 浏览 器 加 载 过 了 。Google 通过 Ajax 库 的 API 提供 了 这 样 的 服务 ， 可 以 从 它 那 里 加 载 
jQuery， 这 样 用 户 在 本 地 拥有 跟 我 们 相同 的 jQuery 的 几率 就 变 大 了 。 


最 后 , 需要 对 主页 图 片 的 标签 做 小 小 的 改动 。 代 码 会 同一 个 ID A main_image 的 元 素 广 入 一 
= 一 起 的 图 片 。 而 在 首页 上 ，main_image 这 个 ID 是 属于 那 张 意 大 利 面 图 片 的 。 因 此 需要 把 
个 ID 从 那个 图 片上 去 掉 ， 然 后 在 图 片 周围 加 一 个 div, 给 这 个 div 加 一 个 叫做 main_image 的 

ID: 


final/index.html 


<div id="main_image"> 
<img src="images/pasta.jpg" alt="Pasta and marinara Sauce > 
</div> 


这 就 弄 好 了 ! 现在 有 了 一 个 很 简单 的 图 片 痰 入 淡出 程序 ， 而 且 这 个 程序 儿 平 不 引 人 注 意 。 当 
JavaScript 被 禁用 之 后 ， 人 们 还 是 可 以 看 到 那个 意大利 面 图 片 。 当 使 用 JavaScript 的 时 候 , 一 定 要 
保证 JavaScript 跟 内 容 无 关 。 另 外 也 不 要 用 onclick FH onmouseover 方法 ， 因 为 将 显示 和 互动 混 
杂 在 一 起 是 完全 没有 必要 的 。 如 果 你 没有 提供 一 个 巷 代 方案 ， 这 会 引起 可 访问 性 方面 的 问题 。 











fast JavaScript 


[2 x, JavaScript (unobtrusive JavaScript) 指 的 是 JavaScript 逐渐 地 同 内 容 完 全 分 离 。 这 
种 方法 可 以 让 你 利用 很 简单 的 万 式 就 能 增强 自己 的 网 站 ， 同 时 又 不 会 影响 为 那些 无 法 使 用 
JavaScript 的 用 户 提 供 的 功能 


®© http://code.google.com/apis/ajaxlibs/documentation/, 
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通常 ， 你 可 能 会 用 以 下 方式 让 链接 在 新 窗口 中 被 打开 : 
<a href="#" onclick="window.open('help.html');">Help</a> 


但 是 如 果 用 户 没有 JavaScript， 他 就 无 法 访问 这 个 页 面 了 。 另 外 一 个 稍 好 一 些 的 方法 是 ， 
在 a 标签 中 使 用 href 标明 地 址 ， 然 后 用 JavaScript 监听 这 个 链接 ， 当 它 被 单 击 的 时 候 ， 脚 
本 会 截获 href 的 值 ， 然 后 在 新 窗口 中 把 它 打 开 。 


[2X JavaScript 在 此 之 上 又 有 些 改进 : 复 用 性 大 大 增强 。 假 设 你 需要 让 页 面 上 所 有 popup 
类 的 链接 都 在 新 窗口 中 被 打开 ， 下 面 这 段 简短 的 jQuery 代码 就 能 实现 这 个 功能 : 


(document) .ready(function( { 
var links = $("a.popup"); 


links.click(function(event){ 
event.preventDefault(); 
window.open($(this).attr('href')); 
D 

ee 








如 果 想 了 解 更 多 关于 隐 式 JavaScript 的 内 容 ， 请 访问 http://onlinetools.org/articles/unobtrusive- 


javascript/. 


JavaScript 可 以 让 页 面 生动 起 来 ， 如 采 使 用 得 当 ， 每 个 用 户 的 体验 都 会 得 以 提升 。 记 得 让 代 
码 变 得 “ 隐 式 ， 确 你 所 有 的 功能 在 没有 JavaScript 时 都 能 正 间 运行。 了 最 后 ， 别 乓 记 压缩 脚本 的 体 
$R! 


21.7 多 试 多 做 


在 本 书 中 ,用 了 一 个 比较 保守 的 配色 和 设计 方案 。 现 在 你 已 经 经 历 了 所 有 的 过 程 ， 是 时 候 从 
头 开始 ， 在 页 面 中 实现 你 自己 的 想法 和 设计 了 。 起 草 自己 的 草图 ,创建 Logo， 选 择 颜色 和 字体 ， 
然后 用 网 格 系统 打造 你 的 网 站 吧 。 多 看 其 他 的 网 站 寻找 灵感 ， 用 Firebug 来 查看 那些 网 站 是 如 何 
建造 的 ， 向 别人 学 习 ， 然 后 不 断 地 实践 、 实 践 、 再 实践 。 跟 编程 一 样 ，Web 设计 也 需要 花费 毕生 
精力 才能 精通 。 

所 以 ， 请 一 直 学 习 、 探 索 和 尝试 吧 ， 你 一 定 会 从 中 得 到 乐趣 。 











程序 员 会 通过 大 量 地 阅读 书籍 和 训 艳 网 站 来 保持 他 们 的 技能 领先 , 这 已 经 是 一 个 公开 的 秘密 
了 。 本 和 草 我 列 出 了 一 些 目 己 觉 得 会 对 你 有 帮助 的 书 ， 这 些 书 基本 上 涵盖 了 我 在 目 己 的 书 中 所 讲 到 
的 方方面面 ， 可 以 帮助 你 进一步 探索 这 些 知识 。 


22.1 色彩 资源 


色彩 从 来 都 是 一 个 复杂 的 话题 , 对 色彩 的 深入 理解 能 帮助 你 将 信息 转化 成 可 以 抓 住 用 户 眼 球 
的 设计 。 以 下 儿 本 书 是 我 认为 比较 有 价值 的 ， 你 可 以 挑 几 本 来 扩充 你 自己 的 藏书 。 

Q Albers, Josef. The Interaction of Color [A1b75] 

Q Itten, Johannes. The Elements of Color [Itt97b] 








O Itten, Johannes. The Art of Colour: The Subjective Experience and Objective Rationale of Color - 
Revised Edition |Itt97a] 
Q Morton, Jill. A Guide to Color Symbolism [Mor97], Colorcom, 1998. 


22.2 ”关于 字体 和 排版 的 书 


对 字体 和 排版 的 深入 理解 也 是 一 个 成 功 的 Web 开发 人 员 所 必 备 的 素质 ， 所 以 我 建议 你 继续 
深入 了 解 这 些 东 西 。 下 面 的 这 两 本 书写 得 很 棒 ， 它 们 向 你 展示 了 如 何在 自己 的 设计 中 有 效 地 应 用 
字体 和 网 格 系统 : 


QO Ruder, Emil. Typography [Rud81] 
Q Muller-Brockmann. Josef, Grid Systems in Graphic Design [MB96] 


22.3 ”技术 书籍 
本 书 为 你 开局 了 网 络 开发 之 路 ， 如 果 想 要 顺 着 这 条 路 走 下 去 ， 下 面 这 些 书 将 会 非常 有 用 。 
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Q Ash, Tim. Landing Page Optimization The Definitive Guide to Testing and Tuning for Conver- 
sions [Ash08] 

Clifton, Brian. Advanced Web Metrics with Google Analytics [C1108] 

Goto, Kelly and Cotler, Emily. Web ReDesign 2.0: Workflow that Works |GC04| 

Krug, Steve. Dont Make Me Think! A Common Sense Approach to Web Usability |Kru04] 
Meyer, Eric.A. Cascading Style Sheets: The Definitive Guide, Third Edition [Mey06] 
Sydik, Jeremy. Design Accessible Web Sites [Syd08] 

Veen, Jeffrey. The Art & Science of Web Design | Vee00] 

Zeldman, Jeffrey. Designing With Web Standards [Zel06| 


Ooo oO U OD U 


22.4 网 站 资源 


互联 网 上 有 无 穷 无 尽 的 指南 和 教程 可 以 帮助 你 构建 网 站 ,下面 是 我 发 据 的 一 些 跟 本 书 相 关 的 
资源 ， 我 认为 这 些 资 源 古 我 找到 的 很 好 鸭 一 些 网 络 资 源 。 








About Hearing LoSsS............ http://www.miracle-ear.com/abouthearingloss.aspx 


Miracle-Ear 网 站 包括 很 多 关于 失聪 患者 的 信息 ， 包 括 类 型 和 病因 。 


A List Apart: CSS @ Ten: The Next Big Thing ......... http://www.alistapart.com/articles/cssatten 
Håkon Wium Lie 讨论 了 在 样式 表 中 使 用 @font-face 的 问题 。 


A List Apart: Going to Print...... ceecceeesseeeeeeesees http://alistapart.com/articles/goingtoprint 
Eric Meyer 写 的 一 篇 文 草 ， 讨 论 了 使 用 CSS 为 网 站 提供 适合 打印 的 样式 表 。 


Brandcurve: “Color Meanings Around the World” 
siren tae s teas ceeeeten EN http://www.brandcurve.com/color-meanings-around-the-world/ 


一 个 颜色 列表 以 及 其 国际 含义 。 


Lighthouse International ~ “Making Text Legible Designing for People with Partial Sight” 
Bade decors Ace sete ste aeons ON P EE http://www. lighthouse.org/accessibility/legible/ 


HEART, RPE A ATA A SE A. BRAXE. 
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Safalra: “The Myth of Web-Safe Fonts” 
0 http://safalra.com/web-design/typography/web-safe-fonts-myth/ 


提供 了 字体 和 CSS 的 基础 知识 。 


Unit Interactive: “Better CSS Font Stacks” 
OO eee http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ 


讨论 了 字体 栈 ， 提 供 了 很 多 优秀 的 示例 。 


WebAim: “CSS in Action: Invisible Content Just for Screen Reader Users” 


人 http://www.webaim.org/techniques/css/invisiblecontent/ 
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Web Design for Developers 


A Programmer’s Guide to Design Tools and Techniques 


写 给 程序 员 的 Web 设 计 书 





“真希 望 我 在 第 一 次 做 网 站 的 时 候 就 能 看 到 这 本 书 。 本 书 涵盖 了 Web 开 发 的 方方面面 ， 当 你 需要 改进 网 站 时 ， 这 本 书 能 为 你 
解答 很 多 问题 。 
一 一 Shae Murphy, Social Brokerage CTO 


“如 果 你 已 经 准备 好 要 踏 人 Web 设计 的 育 妙 世界 ， 读 这 本 书 可 以 让 你 清 断 且 有 效 地 了 解 那些 关键 概念 。 另 外 ， 轻 松 的 行文 风 
格 也 使 得 阅读 本 书 是 一 种 享受 。 
一 一 Jeff Cohen, Purple Workshops 创 始 人 


“作为 Web 开 发 人 员 ， 我 自 以 为 了 解 HTML 和 CSS。 这 本 书 让 我 认识 到 ， 只 了 解 那些 基础 知识 是 不 够 的 ，Web 设 计 决 不 只 是 
改 改 字体 和 颜色 那么 简单 。” 
一 一 Mike Weber，Web 应 用 开发 人 员 


“在 这 本 以 开发 人 员 为 目标 读者 的 书 中 ， 模 糊 了 一 些 公司 中 存在 的 设计 团队 和 开发 团队 之 间 的 界限 。 上 毕竟，“ 程 序 员 ”也 可 
以 创造 出 美观 易 用 的 页 面 。” 
一 一 Jon Kinney, Avastone Technologies，Ruby 构 架 师 


“无论 是 初学 者 还 是 经 验 丰 宣 的 设计 师 ， 都 能 在 这 本 书 中 有 所 收获 。 从 开发 人 员 的 角度 看 ， 这 本 书 在 我 的 日 常 工作 中 发 挥 了 
巨大 作用 ， 它 让 我 在 组 织 页 面 内 容 的 时 候 三 思 而 后 行 。” 
一 一 Chris Johnson， 解 决 方案 开发 专家 
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